Lokesh

Posted on Nov 15

Props in React

#react #frontend #javascript #beginners

When building a React application, we usually divide our application into small components.

For example, an e-commerce website may have:

Navbar component
Product component
Cart component
Footer component

Sometimes, one component needs to send data to another component.

This is where Props come in.

1. What are Props?

Props stands for Properties.

Props allow us to pass data from one component to another in React.

In simple words, props help components share data with other components.

For example, we can send a username from the App component to the Profile component.

2. How to Pass Props?

Let's understand with a simple example.

App.jsx

function App() {
  return (
    <Profile name="Lokesh" />
  );
}

export default App;

Here, we are passing name="Lokesh" to the Profile component.

Profile.jsx

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

export default Profile;

Output:

Hello, Lokesh

Let's understand what happened:

App sends the name Lokesh to Profile.
Profile receives the data through props.
We display the name using props.name.

That's how props work!

3. Passing Multiple Props

We can pass more than one value to a component.

function App() {
  return (
    <Student
      name="Lokesh"
      age={22}
      course="Computer Science"
    />
  );
}

Now, we can receive these values in the Student component.

function Student(props) {
  return (
    <div>
      <h2>Name: {props.name}</h2>
      <p>Age: {props.age}</p>
      <p>Course: {props.course}</p>
    </div>
  );
}

We can pass different types of data through props, such as:

Strings
Numbers
Arrays
Objects
Functions
Boolean values

4. What is Props Destructuring?

Instead of writing props.name, props.age, and props.course every time, we can use destructuring.

Example:

function Student({ name, age, course }) {
  return (
    <div>
      <h2>Name: {name}</h2>
      <p>Age: {age}</p>
      <p>Course: {course}</p>
    </div>
  );
}

Here, we directly get the values from props.

This makes our code shorter and easier to read.

5. Passing Props to Reusable Components

One of the biggest advantages of props is that we can reuse the same component with different data.

Imagine we are creating an e-commerce website with multiple product cards.

Instead of creating a separate component for every product, we can create one reusable Product component.

App.jsx

function App() {
  return (
    <div>
      <Product name="Laptop" price={50000} />

      <Product name="Mobile" price={20000} />

      <Product name="Headphones" price={2000} />
    </div>
  );
}

Product.jsx

function Product({ name, price }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Price: ₹{price}</p>
    </div>
  );
}

The same Product component displays different products based on the props it receives.

This helps us avoid writing the same code again and again.

6. Important Rules About Props

There are a few important things to remember:

Props are used to pass data between components.
Data usually flows from parent components to child components.
Props can contain different types of values.
Props are read-only. A child component should not directly modify the props it receives.
We can use destructuring to make props easier to read.

7. Props vs State

Props and State are both used to work with data in React, but they have different purposes.

Props	State
Used to receive data from a parent component	Used to manage data inside a component
Read-only for the receiving component	Can be updated using a state setter
Passed from parent to child	Managed by the component that owns it

For example:

Props: Passing a product name from App to Product.
State: Updating the quantity of a product when the user clicks the + button.

DEV Community