This content originally appeared on DEV Community and was authored by Himanay Khajuria
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
This content originally appeared on DEV Community and was authored by Himanay Khajuria
Himanay Khajuria | Sciencx (2025-08-06T10:59:25+00:00) 📦 Understanding Props in React (Beginner-Friendly Guide). Retrieved from https://www.scien.cx/2025/08/06/%f0%9f%93%a6-understanding-props-in-react-beginner-friendly-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.