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.