If you are a beginner in React development, sharing data between components can be a bit tricky for you. When I was new to learning React I found this topic very complicated. And I think you might also find sharing data between multiple components a bit complex.
The purpose of this blog post is to introduce you to two of the simplest data-sharing methods in React. I promise I will try to explain the whole thing in a very simple and straightforward way.
In React development, since the entire user interface (UI) is divided into small components, communication between components becomes very important.
Table of Contents
There are many methods and techniques for communicating or sharing data between components in React. But as a beginner, you should prioritize learning the fundamental techniques first.
If you understand the fundamental concepts well then it will be very easy for you to learn the advanced techniques.
In today’s blog post, we will learn about React’s basic fundamental Props and Lifting State Up methods. With the help of these two techniques, you can pass variable data from the parent component to the child component or from the child component to the parent component.
Pass Data from Parent to Child Component Via Props in React
The use of props is the most basic and common in React. It is very easy to use. Data is passed from parent to child component with the help of props. Let’s see a simple example below.
import Child from "./Child";
function Parent() {
const message = "Message comes from the Parent component.";
return (
<div>
{/* Passing the "message" variable data to the Child component. */}
<Child parentData={message} />
</div>
);
}
export default Parent;This is the Parent component.
Let’s look at the parent component. The parent component has a string variable named message. And we pass the variable to the child component via the parentData attribute (property).
Here you can use anything instead of parentData. ie ABC, XYZ, or whatever you like. But remember that what you write as the name of this attribute (property) in the parent component. You must specify the name to receive the data in the child component.
function Child(props) {
return (
<div>
{/* Receiving the "message" variable data comming from Parent component. */}
<h1>{props.parentData}</h1>
</div>
);
}
export default Child;This is the Child component.
Now notice the code of the child component above. Here is the data of the message variable is received from the parent component by writing props.parentData.
Here you can replace props with anything. Again ABC, XYZ, or whatever you like.
Suppose you wrote abc instead of props. Then abc.parentData should be written instead of props.parentData while receiving variable data.
Another thing is that since we wrote parentData as an attribute (property) of the child component in the parent component, you need to write parentData in the child component as well to receive the data. If you write xyz in the parent component then in the child component you need to write xyz instead of parentData. Hope you understand.
Pass State Variable to Child Component Via Props
Let’s build a simple React click counter app. Where the count state variable from the parent component will be passed to the child component. The output will be rendered from the child component.
import { useState } from "react";
import Child from "./Child";
function Parent() {
//Setup the "count" state variable. And the initial default value will be 0.
const [count, setCount] = useState(0);
//Whenever a click on the button happens. It adds 1 to the "count" state variable.
function clickCounter() {
setCount(count + 1);
}
return (
<div>
{/* Pass "count" state variable data to the child component. */}
<Child parentCounter={count} />
<button onClick={clickCounter}>Click Me</button>
</div>
);
}
export default Parent;This is the Parent component with a button and a state variable.
In the above code, we passed data from the parent to the child component using the same props method.
Notice that the count state variable is passed to the Child component with the parentCounter attribute (property).
function Child(props) {
return (
<div>
{/* Receive "count" state variable data from Parent component. */}
<h3>Counter from Parent: {props.parentCounter}</h3>
</div>
);
}
export default Child;This is the Child component. Which receives state variable data through the props.
Here we receive the data of the count state variable by props.parentCounter.
Pass Data from Child to Parent Component Via Lifting State Up in React
The Lifting State Up method is widely used to pass or transfer data from a child component to a parent component. This is usually a callback method of some sort.
Basically, the child passes data as a parameter to the parent component through the Lifting State Up method. After that, the parent component can use that parameter to a function and return the data or do something else.
Let’s see a simple practical example for better understanding.
import Child from "./Child";
function Parent() {
//Receive data from the child component and return it as an alert popup.
function receiveFromChild(value) {
alert(value);
}
return (
<div>
{/* Pass "receiveFromChild" function to the child component. */}
<Child passToParent={receiveFromChild} />
</div>
);
}
export default Parent;This is the Parent Component.
Notice in the parent component’s code above that a function called receiveFromChild is created at the beginning. and value is written as the parameter. Any data sent from the child component will be grabbed in this value parameter.
After that, the data grabbed in the value parameter will be shown in the browser through a pop-up alert.
Next, we pass the receiveFromChild function to the child component via passToParent.
That means, passToParent={receiveFromChild} means when passToParent is called on the child component it will execute the receiveFromChild function on the parent component.
function Child(props) {
const message = "Message from child component";
return (
<div>
{/* Send "message" variable data to the parent component as a parameter. */}
<button onClick={() => props.passToParent(message)}>Click Me</button>
</div>
);
}
export default Child;This is the Child component.
Now notice the code of the child component. We have created a simple straight button. And defined an arrow function inside the onClick event handler.
The receiveFromChild function on the parent component is called by props.passToParent inside the arrow function. The message variable is passed as a parameter.
That means, props.passToParent(message) means it will execute the receiveFromChild function on the parent component. And the data in the message variable will be stored in the value parameter of the parent component.
Pass State Variable Data to Parent Component Through Lifting State Up
Let’s see an example of passing a state variable from child to parent component using Lifting State Up.
import Child from "./Child";
import { useState } from "react";
function Parent() {
const [count, setCount] = useState(0);
function countFromChild(value) {
setCount(value);
}
return (
<div>
<h3>Parent Component ount from Child : {count}</h3>
<Child parentCount={countFromChild} />
</div>
);
}
export default Parent;This is the Parent component.
First of all, we have declared a state variable named count in the above parent component.
After that, a function countFromChild is defined. We take the value parameter to grab the data that will be sent from the child component. And setCount(value) will store the child component’s data in the count state variable.
The count variable inside the <h3> tag is told to render to the browser. And inside the <Child> tag we pass the countFormChild function through the parentCount.
import { useState, useEffect } from "react";
function Child(props) {
const [count, setCount] = useState(0);
function clickCounter() {
setCount(count + 1);
}
useEffect(() => {
props.parentCount(count);
}, [count]);
return (
<div>
<h3>Child component counter : {count}</h3>
<button onClick={clickCounter}>Click Me</button>
</div>
);
}
export default Child;This is the Child component.
Now let’s see the code of the child component. Here we simply take a count state variable. And define a button with an onClick event handler. That means, whenever a button click event happens it will add 1 to the count state variable.
Notice that the useEffect hook is used in the child component. The reason for its use is that this hook will automatically execute whenever the value of the count state variable changes. And props.parentCount(count) will send the value of the count to the parent component.
As a result, we can access the value of the child component’s count state variable from the parent component as well.
Conclusion
So now you know how to share data from parent-to-child and child-to-parent components in the React app. Practice the above examples a couple of times on your own. Then everything will be clear and make sense.
Read the following two articles to learn more about the various data-sharing techniques of React components:
- React Component Inheritance: What, Why, and When to Use It
- React Component Composition Explained with Example
If you have any questions or have something to share then feel free to share it in the comment box below.
