React Props

When you’re learning React, one of the first important concepts you’ll come across is “props”. Props are short for properties, and they are a key part of how components communicate in a React application.

In this post, we’ll explain what props are, why they’re useful, and how to use them with real examples — all in simple, beginner-friendly terms.

What Are Props in React?

Props are arguments passed from one component to another. Just like how functions in JavaScript can accept parameters, React components can receive props. This allows one component (usually a parent) to send data to another component (usually a child).

Think of props as custom HTML attributes that you define and pass into components.

Why Are Props Important?

Props allow component reusability and flexibility. Instead of hardcoding values, you can pass different data to the same component and get different results.

For example, let’s say you have a Greeting component. You can use it to greet different users by passing different names through props:

<Greeting name="Krisha" />
<Greeting name="Janhvika" />

In this case, the name prop is changing, but the component remains the same!

How to Use Props

Let’s see a full working example:

// App.js
import React from 'react';

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

function App() {
  return (
    <div>
      <Greeting name="Kirti" />
      <Greeting name="Amit" />
    </div>
  );
}

export default App;

Explanation:

• The Greeting component receives a prop called name.
• Inside Greeting, we access it using props.name.
• The App component renders Greeting twice with different name values.

Props Are Read-Only

Props are immutable, meaning you cannot change their values inside the child component. They are meant to be passed from parent to child, and not the other way around.

If you need to manage or change data, you use state, not props.

Destructuring Props (Cleaner Code)

Instead of using props.name, you can make your code cleaner using destructuring:

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

This is the same as before but shorter and more readable.

Passing Multiple Props

You’re not limited to one prop. You can pass as many as you want:

<Greeting name="Janhvika" age={22} city="Mumbai" />

And receive them like this:

function Greeting({ name, age, city }) {
  return <p>{name} is {age} years old and lives in {city}.</p>;
}

Props Can Be Any Data Type

Props can be:

• Strings: <Greeting name="Amit" />
• Numbers: <Score points={100} />
• Booleans: <Status online={true} />
• Arrays: <List items={[1, 2, 3]} />
• Objects: <Profile user={{ name: "Krisha", age: 25 }} />
• Even functions: <Button onClick={handleClick} />

Real-Life Use Case Example

Here’s a small React app showing how props work in a mini profile card:

function ProfileCard({ name, job, photo }) {
  return (
    <div className="card">
      <img src={photo} alt={name} />
      <h2>{name}</h2>
      <p>{job}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <ProfileCard 
        name="XYZ" 
        job="Developer" 
        photo="https://example.com/XYZ.jpg" 
      />
      <ProfileCard 
        name="Janhvika Sharma" 
        job="UI Designer" 
        photo="https://example.com/janhvika.jpg" 
      />
    </div>
  );
}

Here, the ProfileCard is used twice with different data, thanks to props.

Conclusion

Props are a fundamental concept in React that let you:

• Pass data between components
• Reuse and customize components
• Keep your code modular and clean

Understanding how to use props will help you build dynamic and flexible UIs in React. Once you’re comfortable with props, you can move on to state and hooks to build even more powerful applications.