Reusable components in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a reusable component in React?

A reusable component is a piece of UI code that can be used multiple times in different parts of an app, helping to avoid repetition and keep code clean.

beginner

How do props help in making React components reusable?

Props let you pass different data to the same component, so it can show different content or behave differently each time it is used.

intermediate

Why should reusable components be small and focused?

Small, focused components are easier to understand, test, and reuse in many places without extra work or confusion.

beginner

What is the difference between a reusable component and a one-time component?

A reusable component is designed to be used many times with different data, while a one-time component is built for a single specific use.

beginner

Give an example of a simple reusable React component.

Example: A Button component that takes props like 'label' and 'onClick' so it can be used anywhere with different text and actions.

What makes a React component reusable?

A It accepts props to customize its content or behavior

B It uses state internally only

C It is written as a class component

D It is only used once in the app

Reusable components accept props so they can show different content or behave differently each time.

Which of these is a benefit of reusable components?

A Writing more code for each use

B Making the app slower

C Avoiding repetition and making code easier to maintain

D Limiting the app to one style

Reusable components help avoid repeating code and make maintenance easier.

How do you pass data to a reusable React component?

A Using HTML tags

B Using props

C Using CSS

D Using global variables

Props are the way to pass data into React components.

What should a reusable component focus on?

A Being very complex

B Doing many unrelated tasks

C Having no props

D Being small and focused on one job

Small, focused components are easier to reuse and maintain.

Which of these is NOT a good practice for reusable components?

A Hardcoding content inside the component

B Keeping components small

C Using props for customization

D Using the component multiple times

Hardcoding content reduces reusability because the component can't adapt to different data.

Explain what reusable components are and why they are useful in React.

Think about how using the same piece of UI code in many places helps save time.

Describe how you would create a simple reusable button component in React.

Focus on how props let you change the button text and action.

Practice

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

easy

A. They make your app run faster by default

B. They let you write less code and keep your app organized

C. They automatically fix bugs in your code

D. They prevent users from clicking buttons

Solution

1. Step 1: Understand the purpose of reusable components

   Reusable components are designed to be used multiple times to avoid repeating code.

2. Step 2: Identify the main benefit

   Using reusable components helps keep the app organized and reduces the amount of code you write.

3. Final Answer:

   They let you write less code and keep your app organized -> Option B

4. Quick Check:

   Reusable components = less code + organized app [OK]

Hint: Reusable means use again to save code and stay organized [OK]

Common Mistakes:

• Thinking reusable components speed up the app automatically
• Believing they fix bugs without coding
• Confusing reusable components with user interaction controls

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

easy

A. <Card title=Hello />

B. <Card title={Hello} />

C. <Card "Hello"=title />

D. <Card title="Hello" />

Solution

1. Step 1: Recall JSX prop syntax

   Props are passed as attributes with name and value inside quotes or curly braces for expressions.

2. Step 2: Check each option

   <Card title="Hello" /> uses correct syntax: title="Hello". <Card title={Hello} /> misses quotes around string. <Card title=Hello /> lacks quotes or braces. <Card "Hello"=title /> has incorrect attribute format.

3. Final Answer:

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

4. Quick Check:

   Props need name="value" syntax [OK]

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

Common Mistakes:

• Forgetting quotes around string prop values
• Using curly braces without variables
• Swapping prop name and value order

3. What will be the output of this React component usage?

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

<Greeting name="Alice" />
<Greeting name="Bob" />

medium

A. Hello, Alice!Hello, Bob!

B. Hello, Alice!

C. Hello, Bob!

D. Error: Cannot render two components like this

Solution

1. Step 1: Understand component usage

   Each <Greeting /> renders an <h1> with the passed name prop.

2. Step 2: Check the two usages

   First renders Hello, Alice!, second renders Hello, Bob!. Both outputs appear in order.

3. Final Answer:

   <h1>Hello, Alice!</h1><h1>Hello, Bob!</h1> -> Option A

4. Quick Check:

   Two components with different props render two greetings [OK]

Hint: Each component instance renders separately with its props [OK]

Common Mistakes:

• Thinking only one component renders
• Believing React errors on multiple components
• Confusing props with state causing wrong output

4. Identify the error in this reusable component code:

function Button(props) {
  return <button>Click {props.label}</button>
}

// Usage
<Button label=Submit />

medium

A. Button component must return a div, not button

B. Props cannot be used inside JSX

C. Missing quotes around the prop value in usage

D. Component name must start with lowercase

Solution

1. Step 1: Check prop usage syntax

   In JSX, string prop values must be in quotes or curly braces.

2. Step 2: Identify the error

   The usage <Button label=Submit /> lacks quotes around "Submit" causing syntax error.

3. Final Answer:

   Missing quotes around the prop value in usage -> Option C

4. Quick Check:

   String props need quotes [OK]

Hint: String props always need quotes in JSX [OK]

Common Mistakes:

• Thinking button must be wrapped in div
• Believing props can't be used inside JSX
• Using lowercase component names

5. You want to create a reusable List component that shows items with a custom renderItem prop function. Which approach correctly uses renderItem inside the component?

hard

A. function List(props) {
return <ul>{
props.items.map(item => <li>{props.renderItem(item)}</li>)
}</ul>;
}

B. function List(props) {
return <ul>{
props.items.map(props.renderItem(item))
}</ul>;
}

C. function List(props) {
return <ul>{
props.renderItem(props.items)
}</ul>;
}

D. function List(props) {
return <ul>{
props.items.forEach(item => props.renderItem(item))
}</ul>;
}

Solution

1. Step 1: Understand how to use renderItem with map

   To render a list, use map to transform each item into JSX, calling renderItem for each.

2. Step 2: Check each option

   function List(props) {
     return <ul>{
       props.items.map(item => <li>{props.renderItem(item)}</li>)
     }</ul>;
   }

   correctly maps items and calls renderItem inside <li>.

   function List(props) {
     return <ul>{
       props.items.map(props.renderItem(item))
     }</ul>;
   }

   calls renderItem incorrectly inside map.

   function List(props) {
     return <ul>{
       props.renderItem(props.items)
     }</ul>;
   }

   calls renderItem once with whole array.

   function List(props) {
     return <ul>{
       props.items.forEach(item => props.renderItem(item))
     }</ul>;
   }

   uses forEach which returns undefined, so no output.

3. Final Answer:

   Option A uses map and renderItem correctly inside list -> Option A

4. Quick Check:

   Use map with renderItem for lists [OK]

Hint: Use map with renderItem inside JSX to render lists [OK]

Common Mistakes:

• Using forEach instead of map for rendering
• Calling renderItem outside map or with wrong argument
• Passing whole array to renderItem instead of single item