Posted in React

Props in React: What They Really Are and Why They Matter

Estimated read time 6 min read

When learning React, the word props shows up very early. Sometimes even before things fully make sense. People say things like “pass props,” “receive props,” or “destructure props,” and if you’re new, it can feel like another technical concept you’re supposed to memorize.

But props are not complicated. They only feel complicated because of how they’re explained sometimes.

Props is just a short form of properties. That’s it. Nothing hidden behind the word. No special React magic yet. Just properties.

Once you look at props in the right way, they start to feel very familiar.

Props Are Just Arguments

The easiest way to understand props is to forget React for a moment and think about normal JavaScript functions.

When you write a function, you pass arguments to it.

function add(a, b) {
  return a + b;
}

Here, a and b are arguments. You pass data into the function, and the function uses that data.

Props work the same way.

A React component is just a function. Props are the arguments passed to that function.

That’s the core idea. Everything else is built on top of it.

Why Props Exist in React

React components are reusable. That’s one of the main reasons people use React in the first place.

But reusable components only make sense if they can receive different data each time they’re used.

That’s where props come in.

Props allow you to pass dynamic data from one component to another. Usually from a parent component to a child component.

Without props, every component would be stuck showing the same static content. That wouldn’t be very useful.

A Simple Props Example

Let’s look at a basic example.

function Car(props) {
  return (
    <h2>This Car Brand is {props.brand}!</h2>
  );
}

Here, Car is a component. It receives one argument called props.

React passes an object into this function. Inside that object, there is a property called brand.

You’re not creating this object manually. React does it for you.

Now let’s see how this component is used.

const Body = () => {
  return (
    <div className="cars">
      <Car brand="BMW" />
      <Car brand="Maruti Suzuki" />
    </div>
  );
};

Each time the Car component is used, a different value is passed for brand.

React collects these values and wraps them into an object, then passes that object to the Car function.

So internally, React does something like:

props = {
  brand: "BMW"
};

and later:

props = {
  brand: "Maruti Suzuki"
};

You don’t see this happening, but that’s what’s going on.

Props Are Read-Only

One important thing about props is that they are read-only.

You can use props. You can display them. You can pass them further down to other components.

But you should not change them.

This makes React components easier to reason about. A component shows what it’s given. Nothing more, nothing less.

Props Are Just an Object

This part is often skipped, but it matters.

Props is just a plain JavaScript object.

No special type. No custom syntax.

That’s why you can log it.

function Car(props) {
  console.log(props);
  return <h2>This Car Brand is {props.brand}</h2>;
}

You’ll see an object printed in the console.

Once you realize props is just an object, destructuring suddenly makes sense.

Destructuring Props on the Fly

Instead of writing props.brand again and again, you can destructure props directly in the function parameter.

function Car({ brand, model }) {
  return (
    <>
      <h2>This Car Brand is {brand}!</h2>
      <h2>Model is {model}</h2>
    </>
  );
}

Here’s what’s happening.

React still passes one object to the function.

JavaScript then immediately extracts brand and model from that object.

This is not a React feature. This is normal JavaScript destructuring.

React just allows it because components are functions.

Calling the Component with Multiple Props

const Body = () => {
  return (
    <div className="cars">
      <Car brand="Hyundai" model="i10" />
      <Car brand="Maruti Suzuki" model="Alto" />
    </div>
  );
};

Each component call sends a different set of values.

React wraps them into an object every time and passes them to Car.

Simple. Predictable. No tricks.

Destructuring Inside the Function Body

Some people prefer destructuring inside the function body instead of the parameter list.

That’s also perfectly fine.

function Car(props) {
  const { brand, model } = props;

  return (
    <>
      <h2>This Car Brand is {brand}!</h2>
      <h2>Model is {model}</h2>
    </>
  );
}

This version can feel clearer when you’re new, because you can still see props as a whole before breaking it apart.

There’s no right or wrong here. Just preference and readability.

Why Curly Braces Are Used

React uses curly braces {} whenever you want to write JavaScript inside JSX.

Props values are JavaScript expressions, so you use curly braces to access them.

{props.brand}
{brand}

Same idea. Different syntax.

A Small But Important Detail

Component names must start with a capital letter.

So this:

<Car brand="BMW" />

is correct.

But this:

<car brand="BMW" />

will not work the way you expect.

React treats lowercase tags as HTML elements, not components.

This mistake is very common and easy to miss.

Thinking About Props in a Practical Way

Props are not something to memorize. They’re something you use naturally once you understand the idea.

Whenever you ask yourself:

“How do I send data to this component?”

The answer is almost always: use props.

Whenever you think:

“This component should show different data in different places”

Again, props.

They’re not advanced. They’re foundational.

Final Thoughts

Props are just properties.
Props are just arguments.
Props are just data passed to a function.

React wraps that data into an object and gives it to your component. You read from it. You don’t change it.

Once that clicks, props stop being a concept and start being a habit.

And honestly, that’s when React starts to feel comfortable instead of confusing

You May Also Read:

Related