Component composition in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is component composition in React?

Component composition means building complex UI by combining smaller, reusable components together, like putting Lego blocks to make a bigger model.

beginner

How do you pass content from a parent component to a child component in React?

You pass content using props. For example, you can pass JSX or data as props to child components to customize what they show.

intermediate

What is the purpose of children prop in React component composition?

The children prop lets a component receive and render nested elements inside it, making it flexible to wrap or decorate other components.

intermediate

Why is component composition preferred over inheritance in React?

React favors composition because it is simpler and more flexible. Components can be combined in many ways without complex class hierarchies, making code easier to understand and reuse.

beginner

Show a simple example of component composition using a Card component wrapping a Button component.

Example:<br><pre>function Card({ children }) {
  return &lt;div className="card"&gt;{children}&lt;/div&gt;;
}

function Button() {
  return &lt;button&gt;Click me&lt;/button&gt;;
}

function App() {
  return &lt;Card&gt;&lt;Button /&gt;&lt;/Card&gt;;
}</pre>

What does the children prop represent in React?

A A method to update props

B The nested elements inside a component

C A special state variable

D A lifecycle hook

The children prop contains whatever elements are nested inside a component when it is used.

Which of these is a benefit of component composition?

A It allows building UI from small reusable parts

B It forces use of class inheritance

C It prevents passing props

D It disables nesting components

Component composition helps build complex UI by combining small reusable components.

How do you pass a button element as content to a Card component?

A <Card><Button /></Card>

B <Card button="Click" />

C <Button><Card /></Button>

D You cannot pass elements as content

You can nest the <Button /> inside <Card> tags to pass it as children.

Why does React prefer composition over inheritance?

A Composition disables props

B Inheritance is faster

C Inheritance is required for hooks

D Composition is simpler and more flexible

React favors composition because it is easier to manage and reuse components without complex class hierarchies.

Which prop is commonly used to pass nested JSX to a component?

A state

B key

C children

D ref

The children prop is the standard way to pass nested JSX elements to a component.

Explain in your own words what component composition is and why it is useful in React.

Think about how Lego blocks build bigger models.

Describe how the children prop works and give an example of how you would use it in a React component.

Imagine a box component that can hold anything inside.