Introduction
Props are one of the most important concepts in React because they allow data to be passed from one component to another. A parent component can send information to a child component using props. Props can contain strings, numbers, arrays, objects, functions, and even other React elements. In this chapter, you will practice creating props, passing data between components, accessing props, using multiple props, and building reusable components with dynamic data. React Props practice questions with solutions help to understand the concepts.
1. What are Props in React?
Props, short for Properties, are used to pass data from one React component to another.
Usually, data is passed from a parent component to a child component.
Example:
function Student(props) {
return <h2>Hello, {props.name}</h2>;
}
function App() {
return <Student name="Aman" />;
}
export default App;
Here:
name="Aman"
is a prop passed from App to Student.
The child component accesses it using:
props.name
Output:
Hello, Aman
Answer: Props are used to pass data from a parent component to a child component.
2. How do you pass a prop to a React component?
Props are passed to a component like HTML attributes.
Example:
function User(props) {
return <h2>{props.name}</h2>;
}
function App() {
return <User name="Riya" />;
}
export default App;
The name prop is passed here:
<User name="Riya" />
The child component receives it through:
props.name
Output:
Riya
Answer: Props are passed by adding attributes to the component.
3. How do you access props inside a component?
Props are received as an object by a functional component.
Example:
function Student(props) {
return (
<div>
<h2>{props.name}</h2>
<p>{props.course}</p>
</div>
);
}
function App() {
return (
<Student
name="Rahul"
course="React.js"
/>
);
}
export default App;
The child component receives an object similar to:
{
name: "Rahul",
course: "React.js"
}
You can access the values using:
props.name
props.course
Answer: Props are accessed using the props object inside the child component.
4. Can you pass multiple props to a component?
Yes. A component can receive multiple props.
Example:
function Student(props) {
return (
<div>
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
<p>Course: {props.course}</p>
</div>
);
}
function App() {
return (
<Student
name="Aman"
age={21}
course="React.js"
/>
);
}
export default App;
Here, three props are passed:
name
age
course
Notice that the number 21 is written using {}:
age={21}
This tells JSX that 21 is a JavaScript number rather than a string.
Answer: Yes. A component can receive multiple props at the same time.
5. Can you pass numbers and other data types as props?
Yes. Props can contain different JavaScript values.
For example:
function Product(props) {
return (
<div>
<h2>{props.name}</h2>
<p>Price: ₹{props.price}</p>
<p>Available: {props.available ? "Yes" : "No"}</p>
</div>
);
}
function App() {
return (
<Product
name="Laptop"
price={50000}
available={true}
/>
);
}
export default App;
Here:
nameis a string.priceis a number.availableis a boolean.
Output:
Laptop
Price: ₹50000
Available: Yes
Answer: Props can contain strings, numbers, booleans, arrays, objects, functions, and other JavaScript values.
6. How do you pass an array as a prop?
An array can be passed using curly braces.
Example:
function Skills(props) {
return (
<ul>
{props.skills.map((skill) => (
<li key={skill}>{skill}</li>
))}
</ul>
);
}
function App() {
const skills = [
"HTML",
"CSS",
"JavaScript",
"React"
];
return <Skills skills={skills} />;
}
export default App;
The array is passed using:
skills={skills}
The child component receives it as:
props.skills
Answer: Arrays can be passed as props using {arrayName}.
7. How do you pass an object as a prop?
Objects can also be passed as props.
Example:
function Student(props) {
return (
<div>
<h2>{props.student.name}</h2>
<p>{props.student.course}</p>
</div>
);
}
function App() {
const student = {
name: "Priya",
course: "React.js"
};
return <Student student={student} />;
}
export default App;
The object is passed here:
student={student}
The child component accesses its properties using:
props.student.name
props.student.course
Answer: Objects can be passed as props and their properties can be accessed inside the child component.
8. Are React Props read-only?
Yes. Props should be treated as read-only inside the receiving component.
For example:
function Student(props) {
return <h2>{props.name}</h2>;
}
The child component should not try to directly change:
props.name = "Rahul";
Instead, if data needs to change, the appropriate approach is usually to use state in the component that owns the data and pass updated values through props.
For example:
function App() {
const name = "Aman";
return <Student name={name} />;
}
Answer: Props are read-only from the receiving component’s perspective. A child should not directly modify its props.
9. How do you make a reusable component using props?
Props make components reusable because the same component can display different data.
Example:
function UserCard(props) {
return (
<div>
<h2>{props.name}</h2>
<p>{props.role}</p>
</div>
);
}
function App() {
return (
<div>
<UserCard
name="Aman"
role="Developer"
/>
<UserCard
name="Riya"
role="Designer"
/>
<UserCard
name="Rahul"
role="Data Analyst"
/>
</div>
);
}
export default App;
The same UserCard component is reused three times with different data.
Output:
Aman
Developer
Riya
Designer
Rahul
Data Analyst
Answer: Props allow one component to display different data, making it reusable.
10. Build a practical Student Card using Props
Let’s create a reusable student card.
StudentCard.jsx
function StudentCard(props) {
return (
<div>
<h2>{props.name}</h2>
<p>Course: {props.course}</p>
<p>Experience: {props.experience} years</p>
<p>
Status:{" "}
{props.active ? "Active Student" : "Inactive Student"}
</p>
</div>
);
}
export default StudentCard;
App.jsx
import StudentCard from "./StudentCard";
function App() {
return (
<div>
<h1>Students</h1>
<StudentCard
name="Aman"
course="React.js"
experience={1}
active={true}
/>
<StudentCard
name="Riya"
course="JavaScript"
experience={2}
active={false}
/>
</div>
);
}
export default App;
The same component is used for different students.
The first component receives:
name → Aman
course → React.js
experience → 1
active → true
The second receives:
name → Riya
course → JavaScript
experience → 2
active → false
This demonstrates why props are so useful in React.
Answer: Props allow a single reusable component to display different data without rewriting the component.
Key Takeaways
- Props means Properties.
- Props are used to pass data from a parent component to a child component.
- Props are passed using JSX attributes.
- Props are received as an object in a functional component.
- Multiple props can be passed to the same component.
- Props can contain strings, numbers, booleans, arrays, objects, and functions.
- Arrays and objects can be passed using
{}. - Props should be treated as read-only by the receiving component.
- Props make React components reusable.
- Different instances of the same component can receive different props.
- Understanding props is essential before learning advanced React concepts.
FAQs
1. What are Props in React.js?
Props are values passed from one React component to another, usually from a parent component to a child component.
2. What does Props stand for?
Props is short for Properties.
3. How do you pass Props in React?
Props are passed as attributes when rendering a component.
<Student name="Aman" />
Here, name is a prop.
4. Can a React component receive multiple Props?
Yes. A component can receive multiple props.
<Student
name="Aman"
age={21}
course="React.js"
/>
5. Can I pass an array as a Prop?
Yes. Arrays can be passed as props using curly braces.
<Skills skills={skills} />
6. Can Props be changed inside a child component?
Props should be treated as read-only by the child component. The child should not directly modify its props.
7. Why are Props important in React?
Props make it possible to pass data between components and create reusable components that can display different information.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
