Introduction
In React, components often need to exchange data to build interactive applications. Data is commonly passed from a parent component to a child using props, while a child can communicate back to its parent by calling a function passed through props. Sibling components can share data through their common parent. In this chapter, we will solve practical questions covering different ways to pass data between React components. React js Passing Data Between Components Practice questions with solutions help to understand the concepts.
1. How do you pass data from a parent component to a child?
In React, a parent can pass data to a child component using props.
Example:
function Parent() {
const name = "Riya";
return <Child name={name} />;
}
The child receives the prop:
function Child({ name }) {
return <h2>Hello, {name}</h2>;
}
Here:
Parentowns thenamevalue.Childreceivesnamethrough props.- The child can read the value but should not directly modify the parent’s variable.
2. How do you pass multiple values from parent to child?
A parent can pass multiple props to a child.
function Parent() {
const name = "Riya";
const age = 22;
const course = "React.js";
return (
<Student
name={name}
age={age}
course={course}
/>
);
}
The child can receive them using destructuring:
function Student({ name, age, course }) {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
<p>Course: {course}</p>
</div>
);
}
This is one of the most common ways to pass information between components.
3. How do you pass an object from parent to child?
Objects can also be passed through props.
function Parent() {
const student = {
name: "Aman",
age: 21,
course: "React.js"
};
return <Student data={student} />;
}
The child can access the object:
function Student({ data }) {
return (
<div>
<h2>{data.name}</h2>
<p>{data.age}</p>
<p>{data.course}</p>
</div>
);
}
You can also destructure the object:
function Student({ data }) {
const { name, age, course } = data;
return (
<div>
<h2>{name}</h2>
<p>{age}</p>
<p>{course}</p>
</div>
);
}
4. How do you pass an array from parent to child?
An array can be passed through props like any other JavaScript value.
function Parent() {
const skills = [
"HTML",
"CSS",
"JavaScript",
"React.js"
];
return <Skills skills={skills} />;
}
The child can render the array:
function Skills({ skills }) {
return (
<ul>
{skills.map((skill) => (
<li key={skill}>{skill}</li>
))}
</ul>
);
}
Here, the parent provides the data and the child decides how to display it.
5. How do you pass a function from parent to child?
A function can be passed to a child through props.
Example:
function Parent() {
const showMessage = () => {
alert("Hello from Parent");
};
return <Child onMessage={showMessage} />;
}
The child can call the function:
function Child({ onMessage }) {
return (
<button onClick={onMessage}>
Show Message
</button>
);
}
This pattern is useful when the child needs to trigger an action controlled by the parent.
6. How does a child pass data back to the parent?
React data normally flows from parent to child. A child does not directly send a value into the parent’s state.
Instead, the parent passes a callback function to the child.
function Parent() {
const [message, setMessage] = useState("");
const handleMessage = (value) => {
setMessage(value);
};
return (
<>
<Child onSend={handleMessage} />
<h2>{message}</h2>
</>
);
}
Child component:
function Child({ onSend }) {
return (
<button onClick={() => onSend("Hello Parent!")}>
Send Message
</button>
);
}
The child calls onSend() with data, and the parent updates its state.
7. How do you pass data between sibling components?
Sibling components should not directly manage shared data between themselves.
Instead, their common parent can own the data.
function Parent() {
const [name, setName] = useState("");
return (
<>
<Input
name={name}
setName={setName}
/>
<Display name={name} />
</>
);
}
Input component:
function Input({ name, setName }) {
return (
<input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter name"
/>
);
}
Display component:
function Display({ name }) {
return <h2>Hello, {name}</h2>;
}
The data flow is:
Input → Parent State → Display
This pattern is closely related to Lifting State Up.
8. How do you pass data using callback functions?
Callback functions are useful when a child needs to send information or trigger an action in its parent.
Example:
function Parent() {
const [username, setUsername] = useState("");
const handleUsername = (name) => {
setUsername(name);
};
return (
<>
<UserForm onSubmitName={handleUsername} />
<h2>Username: {username}</h2>
</>
);
}
Child:
function UserForm({ onSubmitName }) {
return (
<button onClick={() => onSubmitName("Rahul")}>
Select Rahul
</button>
);
}
When the button is clicked:
- Child calls
onSubmitName(). "Rahul"is passed to the parent.- Parent updates its state.
- Updated data is displayed.
9. How do you pass data through multiple components?
Sometimes data needs to travel through several levels of components.
For example:
App
↓
Dashboard
↓
Profile
↓
User
The data can be passed through props:
function App() {
const username = "Aman";
return <Dashboard username={username} />;
}
Then:
function Dashboard({ username }) {
return <Profile username={username} />;
}
Then:
function Profile({ username }) {
return <User username={username} />;
}
Finally:
function User({ username }) {
return <h2>{username}</h2>;
}
This works, but passing props through components that do not actually use the data can become inconvenient. When data needs to be accessed deeply across many components, Context API can be considered.
10. How do you build a practical Parent-Child Data Passing example?
Let’s create a small student information application.
The parent component stores the student data:
import { useState } from "react";
function App() {
const [student, setStudent] = useState({
name: "Riya",
course: "React.js",
city: "Delhi"
});
const updateCity = (city) => {
setStudent((currentStudent) => ({
...currentStudent,
city
}));
};
return (
<div>
<StudentInfo student={student} />
<StudentActions
city={student.city}
onCityChange={updateCity}
/>
</div>
);
}
The first child receives and displays the data:
function StudentInfo({ student }) {
return (
<div>
<h2>{student.name}</h2>
<p>Course: {student.course}</p>
<p>City: {student.city}</p>
</div>
);
}
The second child sends an update to the parent:
function StudentActions({ city, onCityChange }) {
return (
<div>
<p>Current City: {city}</p>
<button onClick={() => onCityChange("Mumbai")}>
Change City
</button>
</div>
);
}
How it works
Appowns the student state.StudentInforeceives the student object through props.StudentActionsreceives the current city and a callback.- The button calls
onCityChange(). - The parent updates its state.
- Both child components receive the updated data.
This creates a clear and predictable data flow:
Parent State → Child Props → Child Callback → Parent State Update
Key Takeaways
- React commonly follows one-way data flow.
- Parent components can pass data to children through props.
- Props can contain strings, numbers, arrays, objects, functions, and other JavaScript values.
- A child can communicate with its parent by calling a callback passed through props.
- Sibling components can communicate through their common parent.
- Lifting state up is useful when multiple components need the same state.
- Passing props through many intermediate components is sometimes called prop drilling.
- Context API can be useful when deeply nested components need shared data.
- The component that owns state should generally control updates to that state.
- Clear data flow makes React applications easier to understand and maintain.
FAQs
1. How does data flow between React components?
React generally uses one-way data flow. A parent passes data to a child through props, while a child can request changes by calling a callback function provided by the parent.
2. Can a child directly change the parent’s state?
No. A child should not directly modify the parent’s state. The parent can pass a state setter or callback function that the child can call to request an update.
3. How can siblings share data in React?
Sibling components can share data through their common parent. The parent owns the state and passes the required data and callbacks to the siblings.
4. What are props in React?
Props are values passed from a component to another component, commonly from a parent to a child. Props are read-only from the receiving component’s perspective.
5. Can functions be passed through props?
Yes. Functions can be passed through props and are commonly used as callbacks so that child components can trigger actions or send information to their parent.
6. What is prop drilling in React?
Prop drilling happens when data is passed through several intermediate components using props even though those intermediate components do not need to use the data themselves.
7. When should Context API be considered?
Context API can be considered when many components at different levels of the component tree need access to the same data and passing props through intermediate components becomes inconvenient.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
