Why Using props in JSX in React? - Purpose & Use Cases

The Big Idea

Discover how a tiny change in your code can save hours of repetitive work!

The Scenario

Imagine you want to show a list of friends on a webpage, and for each friend, you write separate HTML code with their name and picture manually.

The Problem

Writing separate HTML for each friend is slow, repetitive, and if you want to change the layout, you must update every single place manually, which is easy to forget or mess up.

The Solution

Using props in JSX lets you create one reusable component that takes different data (props) and shows it correctly, so you write less code and can update the design in one place.

Before vs After

✗ Before

<Friend name="Alice" picture="alice.jpg" />
<Friend name="Bob" picture="bob.jpg" />
<Friend name="Carol" picture="carol.jpg" />

✓ After

const friends = [{name: 'Alice', picture: 'alice.jpg'}, {name: 'Bob', picture: 'bob.jpg'}, {name: 'Carol', picture: 'carol.jpg'}];
friends.map(f => <Friend key={f.name} name={f.name} picture={f.picture} />)

What It Enables

You can build flexible, reusable UI pieces that adapt to different data easily and keep your code clean and simple.

Real Life Example

Think of a social media app showing posts: each post looks the same but shows different text and images. Props let the app reuse the post layout for every user's content.

Key Takeaways

Manual HTML for each item is repetitive and error-prone.

Props let components receive data to display dynamically.

This makes UI code reusable, easier to maintain, and scalable.