Reusable UI components in React - Step-by-Step Execution

Concept Flow - Reusable UI components

Define Component

↓

Use Component in JSX

↓

React renders Component

↓

Component returns UI elements

↓

UI appears on screen

↓

Component can be reused multiple times

This flow shows how a reusable React component is defined, used in JSX, rendered by React, and displayed on the screen multiple times.

Execution Sample

React

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

function App() {
  return <>
    <Button label="Save" />
    <Button label="Cancel" />
  </>;
}

Defines a Button component that shows a label, then uses it twice with different labels.

Execution Table

Step	Action	Component	Props	Rendered Output
1	Define Button component	Button	{ label }	Returns <button>{label}</button>
2	Define App component	App	none	Returns two Button components with labels 'Save' and 'Cancel'
3	Render App	App	none	React calls App, which returns two Button elements
4	Render first Button	Button	{ label: 'Save' }	<button>Save</button> appears on screen
5	Render second Button	Button	{ label: 'Cancel' }	<button>Cancel</button> appears on screen
6	Display UI	App	none	Two buttons labeled 'Save' and 'Cancel' visible
7	Reuse possible	Button	any label	Can create more buttons with different labels
8	Exit	none	none	Rendering complete, UI ready

💡 All components rendered and UI displayed; reusable components can be used again with different props.

Variable Tracker

Variable	Start	After Step 4	After Step 5	Final
label (first Button)	undefined	"Save"	"Save"	"Save"
label (second Button)	undefined	undefined	"Cancel"	"Cancel"

Key Moments - 2 Insights

Why do both buttons show different labels even though they use the same Button component?

Because each Button instance receives different props (label) as shown in execution_table steps 4 and 5, React renders them with their own label.

Does defining the Button component multiple times create multiple copies?

No, the Button component is defined once (step 1). React reuses this definition to render multiple instances with different props (steps 4 and 5).

Visual Quiz - 3 Questions

Look at the execution table, what label prop does the Button component receive at step 5?

A "Cancel"

B undefined

C "Save"

D "Submit"

💡 Hint

Check the Props column at step 5 in the execution_table.

At which step does React render the first Button component?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look for the step where the first Button with label 'Save' is rendered.

If you add another <Button label="Delete" /> in App, what changes in the execution table?

A Step 4 label changes to 'Delete'

B No change, because Button is reusable

C A new step rendering Button with label 'Delete' is added after step 5

D App component definition changes

💡 Hint

Adding a new Button means React renders one more Button instance, so a new rendering step appears.

Concept Snapshot

Reusable UI components in React:
- Define a function component that accepts props.
- Use the component in JSX with different props.
- React renders each instance separately.
- Components can be reused anywhere with different data.
- This keeps UI code clean and consistent.

Full Transcript

Reusable UI components in React let you write a component once and use it many times with different data. You define a component as a function that takes props and returns UI elements. When you use this component in JSX, React renders each instance with the props you give it. For example, a Button component can be used twice with labels 'Save' and 'Cancel'. React calls the Button function twice with different props and shows two buttons on screen. This approach saves time and keeps your UI consistent and easy 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