Reusable UI 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 accepts a label and onClick function as props. What will be displayed and how will it behave when clicked?

React

import React from 'react';

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

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

A A button with text 'Click me' that shows an alert 'Clicked!' when clicked.

B A button with no text that does nothing when clicked.

C A button with text 'Press me' that shows an alert 'Clicked!' when clicked.

D A button with text 'Press me' but clicking it causes an error.

💡 Hint

Look at the props passed to the Button component and what the onClick function does.

The Button component renders a button with the given label and calls the onClick function when clicked. Here, label is 'Press me' and onClick shows an alert 'Clicked!'.

❓ state_output

intermediate

What is the displayed count after clicking the button twice?

This reusable counter component uses React state. What number will be shown after clicking the button two times?

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

export default Counter;

A Count: 0

B Count: 2

C Count: NaN

D Count: 1

💡 Hint

Each click increases count by 1 starting from 0.

The count starts at 0. Each click adds 1. After two clicks, count is 2.

📝 Syntax

advanced

Which option correctly defines a reusable input component with controlled value?

Choose the code that correctly implements a controlled input component in React that updates its value on user typing.

A

function TextInput({ value, onChange }) {
  return <input value={value} onChange={e => onChange(e.target.value)} />;
}

B

function TextInput({ value, onChange }) {
  return <input defaultValue={value} onChange={e => onChange(e.target.value)} />;
}

C

function TextInput({ value, onChange }) {
  return <input value={value} onChange={onChange} />;
}

D

function TextInput({ value, onChange }) {
  return <input onChange={e => onChange(e.target.value)} />;
}

💡 Hint

Controlled inputs use the value prop and update via onChange with event target value.

Option A correctly passes value and calls onChange with the new input value. Option A uses defaultValue which is uncontrolled. Option A passes onChange directly without extracting value. Option A lacks value prop making it uncontrolled.

🔧 Debug

advanced

Why does this reusable list component not update when items change?

This component receives an array of items as props and renders them. However, when the items array changes, the list does not update. What is the likely cause?

React

function ItemList({ items }) {
  const [list, setList] = React.useState(items);
  return <ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}

A The component copies items to state only once and never updates state when props change.

B The key prop is missing, so React cannot track list items properly.

C The items prop is mutated directly causing React to ignore changes.

D The map function is used incorrectly causing a runtime error.

💡 Hint

State initialized from props does not update automatically when props change.

The component sets state from props once on mount. Later changes to props do not update state, so the list stays the same.

🧠 Conceptual

expert

Which statement best describes the benefit of reusable UI components?

Why do developers create reusable UI components in frameworks like React?

A To avoid using props and state for managing UI behavior.

B To make the app slower by adding more layers of abstraction.

C To force developers to write more code for each UI element.

D To write code once and use it many times, improving consistency and reducing bugs.

💡 Hint

Think about code reuse and maintenance benefits.

Reusable components let developers build UI pieces once and reuse them, making apps consistent and easier to maintain.