Component composition in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of nested components?

Consider these React components composed together. What will be rendered inside the <App /> component?

React

function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

function App() {
  return (
    <Wrapper>
      <Greeting name="Alice" />
    </Wrapper>
  );
}

A <p>Hello, Alice!</p>

B <div class="wrapper"><p>Hello, Alice!</p></div>

C <div><p>Hello, Alice!</p></div>

D <div class="wrapper">Hello, Alice!</div>

💡 Hint

Remember that children props render the nested components inside the parent.

The Wrapper component wraps its children inside a div with class wrapper. The Greeting component renders a p tag with the greeting text. So the final output is a div with class wrapper containing the p tag.

❓ state_output

intermediate

How does state flow in composed components?

Given these components, what is the displayed count after clicking the button once?

React

import React, { useState } from 'react';

function Counter({ count }) {
  return <p>Count: {count}</p>;
}

function Button({ onClick }) {
  return <button onClick={onClick}>Increment</button>;
}

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <Counter count={count} />
      <Button onClick={() => setCount(count + 1)} />
    </>
  );
}

A Count: 1

B Count: 0

C Count: undefined

D Count: NaN

💡 Hint

Clicking the button triggers setCount to update the state.

The initial count is 0. Clicking the button calls setCount(count + 1), which updates count to 1. The Counter component receives the updated count and displays "Count: 1".

📝 Syntax

advanced

Which option correctly composes components with props forwarding?

Which code correctly forwards all props from Wrapper to Inner component?

React

function Inner(props) {
  return <div>{props.message}</div>;
}

function Wrapper(props) {
  // Forward props to Inner
  return ???
}

A return <Inner props={props} />;

B return <Inner {...props.message} />;

C return <Inner message={props.message} />;

D return <Inner {...props} />;

💡 Hint

Use spread syntax to forward all props.

Option D uses the spread operator {...props} to pass all props to Inner. Option D passes a single prop named props which is incorrect. Option D only passes message but not other props. Option D tries to spread a string which causes an error.

🔧 Debug

advanced

Why does this composed component cause an error?

What error does this code cause and why?

React

function Parent() {
  return <Child />;
}

function Child(props) {
  return <div>{props.text}</div>;
}

A SyntaxError: Unexpected token

B TypeError: Child is not a function

C ReferenceError: props is not defined

D No error, renders undefined

💡 Hint

Check if props is declared in the function parameters.

The Child component uses props.text but does not declare props as a parameter. This causes a ReferenceError because props is undefined in the function scope.

🧠 Conceptual

expert

What is the main benefit of component composition in React?

Choose the best explanation for why React encourages component composition.

A It allows building complex UIs by combining small, reusable components.

B It forces all components to share the same state object.

C It prevents components from receiving props from parents.

D It requires using class components instead of functions.

💡 Hint

Think about how small pieces can build bigger things.

Component composition lets developers create complex user interfaces by assembling small, focused, reusable components. This improves code clarity and reuse. The other options are incorrect or false statements.

Practice

1. What is the main purpose of component composition in React?

easy

A. To make components run faster by skipping rendering

B. To write all UI code in a single component

C. To avoid using props between components

D. To build UI by combining smaller components

Solution

1. Step 1: Understand component composition

   Component composition means creating complex UI by combining smaller, reusable components.

2. Step 2: Compare options

   Only To build UI by combining smaller components correctly describes this purpose. Others are incorrect or unrelated.

3. Final Answer:

   To build UI by combining smaller components -> Option D

4. Quick Check:

   Component composition = combining smaller components [OK]

Hint: Think: How do you build complex UI simply? [OK]

Common Mistakes:

• Thinking composition means one big component
• Confusing composition with performance optimization
• Ignoring the use of smaller components

2. Which of the following is the correct way to pass child components in React?

easy

A. Child

B. {Child}

C.

D. Child()

Solution

1. Step 1: Identify correct JSX syntax for children

   In React, child components are passed inside the parent tags as JSX elements, like <Parent><Child /></Parent>.

2. Step 2: Evaluate options

   <Parent><Child /></Parent> uses correct JSX syntax. Options A, C, and D are invalid or incorrect ways to pass components.

3. Final Answer:

   <Parent><Child /></Parent> -> Option C

4. Quick Check:

   Children passed as JSX elements = <Parent><Child /></Parent> [OK]

Hint: Children go inside parent tags as JSX elements [OK]

Common Mistakes:

• Passing children as plain text instead of components
• Using curly braces incorrectly around components
• Calling components like functions inside JSX

3. What will be rendered by this React code?

function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

function App() {
  return (
    <Wrapper>
      <p>Hello</p>
      <p>World</p>
    </Wrapper>
  );
}

medium

A. HelloWorld

B. HelloWorld

C. HelloWorld

D. Error: children must be a single element

Solution

1. Step 1: Understand Wrapper component

   Wrapper returns a div with class "wrapper" that renders its children inside.

2. Step 2: Check children passed to Wrapper

   App passes two <p> elements as children, so both appear inside the div.

3. Final Answer:

   <div class="wrapper"><p>Hello</p><p>World</p></div> -> Option A

4. Quick Check:

   Children rendered inside wrapper div = <div class="wrapper"><p>Hello</p><p>World</p></div> [OK]

Hint: Children inside Wrapper appear inside its div container [OK]

Common Mistakes:

• Thinking children must be a single element
• Expecting children to concatenate as text
• Ignoring the wrapper div output

4. Identify the error in this React component composition:

function Container(props) {
  return <div>{props.children}</div>;
}

function App() {
  return (
    <Container>
      <h1>Title</h1>
      <h2>Subtitle</h2>
    </Container>
  );
}

// Usage
ReactDOM.render(<App />, document.getElementById('root'));

medium

A. No error; this is valid composition

B. props.children must be wrapped in a fragment

C. Container must return a single child element

D. Cannot pass multiple children without keys

Solution

1. Step 1: Review Container component

   Container returns a div wrapping props.children, which can be multiple elements.

2. Step 2: Check usage in App

   App passes two headings as children, which is valid JSX inside a div.

3. Final Answer:

   No error; this is valid composition -> Option A

4. Quick Check:

   Multiple children inside a div is valid JSX [OK]

Hint: Multiple children inside a div are allowed without extra wrappers [OK]

Common Mistakes:

• Thinking multiple children need a fragment wrapper
• Confusing React rules about keys with composition errors
• Assuming props.children must be a single element

5. You want to create a reusable Card component that accepts a header and footer as props and displays children content in the middle. Which is the best way to compose this component?

hard

A. Render header and footer inside children and pass content as a separate prop

B. Use props.header and props.footer to render header and footer, and props.children for content inside a container div

C. Pass header and footer as children and ignore props.children

D. Use only props.children and expect header/footer inside it

Solution

1. Step 1: Understand Card component needs

   Card should render header, children content, and footer separately for reuse and clarity.

2. Step 2: Evaluate composition options

   Use props.header and props.footer to render header and footer, and props.children for content inside a container div correctly uses props.header and props.footer for fixed parts and props.children for flexible content.

3. Final Answer:

   Use props.header and props.footer to render header and footer, and props.children for content inside a container div -> Option B

4. Quick Check:

   Separate header/footer props + children content = Use props.header and props.footer to render header and footer, and props.children for content inside a container div [OK]

Hint: Use props for fixed parts, children for flexible content [OK]

Common Mistakes:

• Passing header/footer as children causing confusion
• Ignoring children prop for main content
• Mixing content and layout in children prop