Reusable components in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this reusable button component?

Consider this React component that reuses a button with different labels and click handlers.

function MyButton({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>
}

function App() {
  const handleClick = () => alert('Clicked!')
  return <MyButton label="Press me" onClick={handleClick} />
}

What happens when the button is clicked?

React

function MyButton({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>
}

function App() {
  const handleClick = () => alert('Clicked!')
  return <MyButton label="Press me" onClick={handleClick} />
}

A Nothing happens because onClick is not passed correctly

B An alert box shows the message 'Clicked!'

C The button label changes to 'Clicked!'

D A console error occurs due to missing event parameter

💡 Hint

Check how the onClick prop is used and what the handler does.

The MyButton component receives a function handleClick as onClick. When the button is clicked, it calls this function, which triggers an alert with 'Clicked!'.

❓ state_output

intermediate

What is the displayed count after clicking the reusable counter button twice?

Look at this reusable counter button component:

function CounterButton() {
  const [count, setCount] = React.useState(0)
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
}

function App() {
  return <CounterButton />
}

If the user clicks the button two times, what text is shown on the button?

React

function CounterButton() {
  const [count, setCount] = React.useState(0)
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
}

function App() {
  return <CounterButton />
}

A Clicked 0 times

B Clicked 1 times

C Clicked NaN times

D Clicked 2 times

💡 Hint

Think about how state updates after each click.

Each click increases the count by 1. After two clicks, count is 2, so the button shows 'Clicked 2 times'.

📝 Syntax

advanced

Which option correctly defines a reusable React component that accepts children?

Which of the following code snippets correctly defines a reusable React component that renders its children inside a div?

A function Container({ children }) { return <div>{children}</div> }

B function Container(children) { return <div>{children}</div> }

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

D function Container() { return <div>{children}</div> }

💡 Hint

Remember how to access children passed between component tags.

Option A uses destructuring to get children from props and renders it correctly. Option C works but is less modern. Option B treats children as a direct parameter, which is incorrect. Option D references an undefined variable.

🔧 Debug

advanced

Why does this reusable component cause a runtime error?

Examine this React component:

function List({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  )
}

function App() {
  const data = [{ id: 1, name: 'Apple' }, { id: 2 }]
  return <List items={data} />
}

What error will occur when rendering App?

React

function List({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  )
}

function App() {
  const data = [{ id: 1, name: 'Apple' }, { id: 2 }]
  return <List items={data} />
}

A No error, renders list with 'Apple' and empty item

B Key warning: Each child in a list should have a unique 'key' prop

C TypeError: Cannot read property 'name' of undefined

D ReferenceError: item is not defined

💡 Hint

Check the data passed and what properties are accessed inside the map.

The second item in data lacks a 'name' property. Accessing item.name returns undefined, which React renders as empty. No TypeError occurs. Keys are unique, so no key warning. Option A is correct.

🧠 Conceptual

expert

Which option best explains why reusable components improve React app maintainability?

Why do reusable components help maintain a React application better?

A They force developers to write more code but improve styling flexibility

B They increase the app size but improve performance by caching components

C They reduce code duplication and centralize logic, making updates easier and consistent

D They prevent any bugs by isolating all state in one place

💡 Hint

Think about how reusing code affects changes and bugs.

Reusable components let you write code once and use it many times. This reduces repeated code and makes fixing or changing behavior easier because you update in one place. This improves maintainability. The other options are incorrect or misleading.