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.

Practice

1. What is the main benefit of creating reusable UI components in React?

easy

A. They automatically fix bugs

B. They make the app run faster

C. They save time and keep the app consistent

D. They replace the need for CSS styling

Solution

1. Step 1: Understand the purpose of reusable components

   Reusable components are designed to be used multiple times, reducing repeated code.

2. Step 2: Identify the main benefit

   Using reusable components saves development time and keeps the app's look and behavior consistent.

3. Final Answer:

   They save time and keep the app consistent -> Option C

4. Quick Check:

   Reusable components = save time + consistency [OK]

Hint: Reusable means use again to save time and stay consistent [OK]

Common Mistakes:

• Thinking reusable components speed up app runtime
• Believing they fix bugs automatically
• Confusing styling with component reuse

2. Which of the following is the correct way to pass a prop named title with value "Hello" to a React component Card?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall JSX prop syntax

   Props are passed as attributes with name=value pairs, using quotes for strings.

2. Step 2: Check each option

   uses correct JSX syntax: title="Hello". Others have syntax errors.

3. Final Answer:

   <Card title="Hello" /> -> Option A

4. Quick Check:

   Props in JSX use name="value" [OK]

Hint: Props look like HTML attributes with quotes for strings [OK]

Common Mistakes:

• Using curly braces without variable (Option B)
• Adding extra quotes around prop name (Option C)
• Using colon instead of equals (Option A)

3. Given this React component:

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

// Usage:
<Button label="Click me" />

What will be rendered on the page?

medium

A. label

B. Nothing will render

C. {label}

D. Click me

Solution

1. Step 1: Understand prop usage in the component

   The component receives label as a prop and inserts it inside the button element.

2. Step 2: Check the usage

   The component is used with label="Click me", so the button shows "Click me" text.

3. Final Answer:

   <button>Click me</button> -> Option D

4. Quick Check:

   Prop label = "Click me" shown inside button [OK]

Hint: Props passed show as content inside component tags [OK]

Common Mistakes:

• Thinking the literal word 'label' appears
• Confusing JSX expression with string
• Assuming component renders nothing without explicit return

4. What is wrong with this reusable React component code?

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

// Usage:
<Alert message="Warning!" />

medium

A. The variable 'message' is not defined inside the component

B. The component does not receive props correctly

C. The usage of the component is incorrect

D. The component should return a button instead of a div

Solution

1. Step 1: Check how props are used inside the component

   The component uses {message} but does not extract it from props.

2. Step 2: Identify the error

   Since message is not defined or extracted, this causes a reference error.

3. Final Answer:

   The variable 'message' is not defined inside the component -> Option A

4. Quick Check:

   Props must be accessed via props or destructuring [OK]

Hint: Always get props from function parameter before use [OK]

Common Mistakes:

• Using prop names directly without props or destructuring
• Assuming usage syntax is wrong
• Thinking component must return button

5. You want to create a reusable Input component that can show a label and accept user input. Which approach correctly allows customizing the label text and input placeholder using props?

hard

A. function Input() {
return (
<label>
label
<input placeholder="placeholder" />
</label>
);
}

B. function Input({ label, placeholder }) {
return (
<label>
{label}
<input placeholder={placeholder} />
</label>
);
}

C. function Input(props) {
return (
<label>
props.label
<input placeholder="props.placeholder" />
</label>
);
}

D. function Input({ label, placeholder }) {
return (
<label>
<input placeholder={label} />
{placeholder}
</label>
);
}

Solution

1. Step 1: Check prop usage for label and placeholder

   Props should be destructured and used inside JSX expressions with curly braces.

2. Step 2: Verify correct placement of label and placeholder

   function Input({ label, placeholder }) { return ( <label> {label} <input placeholder={placeholder} /> </label> ); } correctly places label text and uses placeholder prop inside input element.

3. Final Answer:

   function Input({ label, placeholder }) { return ( <label> {label} <input placeholder={placeholder} /> </label> ); } -> Option B

4. Quick Check:

   Destructure props and use inside JSX with curly braces [OK]

Hint: Destructure props and use inside JSX with curly braces [OK]

Common Mistakes:

• Using prop names as plain text instead of expressions
• Putting placeholder text in wrong prop
• Mixing label and placeholder positions