📦 Understanding Props in React (Beginner-Friendly Guide)

If you're learning React, you might have seen the word "props" and wondered what it means. Don't worry! In this blog, we’ll understand props in the easiest way possible. Think of it like this:

🧠 What are Props?

👉 Props means properties.

👉 They are used to pass data from one component to another in React.

👉 Just like we pass ingredients to a recipe, we pass data (props) to a React component.

🧃 Simple Analogy: Juice Shop

Imagine you own a juice shop. When someone places an order, they tell you the flavor they want – like mango, orange, or apple. You then prepare the juice using that flavor.

In React, the juice shop is your component and the flavor is the prop.

---

🛠️ Simple Example: Passing a Name

Let’s create a small app that says hello to different people.

Step 1: Create a Welcome component:

src>components>Welcome.jsx

import React from 'react'

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

export default Welcome

Here:

👉 Welcome is a component

👉 It receives props as an argument

👉 We access the name using props.name

Step 2: Use Welcome component and pass props:

src>App.jsx

import React from 'react'

function App() {
  return (
    <div>
      <Welcome name="Himanay" />
      <Welcome name="Aarav" />
      <Welcome name="Emma" />
    </div>
  );
}

export default App

👉 We are using <Welcome /> three times

👉 Each time, we pass a different name

👉 props.name will be "Himanay", "Aarav", "Emma" in each one

Output:

Hello, Himanay!
Hello, Aarav!
Hello, Emma!

🎉 You just used props to pass data to a component!

---

📦 Little Complex Example: Passing an Object

Now let’s say we want to show a user’s profile with a name and an age.

Step 1: Create a Profile component:

src>components>Profile.jsx

import React from 'react'

function Profile(props) {
  return (
    <div>
      <h3>Name: {props.user.name}</h3>
      <p>Age: {props.user.age}</p>
    </div>
  );
}

export default Profile

👉 props.user is an object

👉 We use props.user.name and props.user.age to show the data

Step 2: Use the Profile component:

src>App.jsx

import React from 'react'

function App() {
  const user1 = { name: "Himanay", age: 28 };
  const user2 = { name: "Sophia", age: 22 };

  return (
    <div>
      <Profile user={user1} />
      <Profile user={user2} />
    </div>
  );
}

export default App

🧠 We created two user objects and passed them as props

🧠 Inside the Profile component, we used that data to show profile info

Output:

Name: Himanay
Age: 28

Name: Sophia
Age: 22

---

🧼 Clean Tip: Destructuring Props

To make your code cleaner, you can also destructure props like this:

function Welcome({ name }) {
  return <h2>Hello, {name}!</h2>;
}

And:

function Profile({ user }) {
  return (
    <div>
      <h3>Name: {user.name}</h3>
      <p>Age: {user.age}</p>
    </div>
  );
}

👉 This helps avoid writing props. again and again.

---

🔁 Recap

✅ Props help us pass data from one component to another

✅ Props are read-only, we cannot change them inside the component

✅ You can pass strings, numbers, arrays, objects, even functions as props

✅ Use destructuring to write cleaner code

---

✅ Final Thoughts

Learning props is a big step in React. It helps you build reusable and dynamic components. Start small like we did here, and then build more complex UIs using the same idea.

If you understood this, give yourself a high five! 🖐️

Now go ahead and try making your own components using props in CodeAcademix or any React app.

Happy Coding! 💻✨

Written by Himanay Khajuria