How React Components Pass Data Between Each Other Using Props
This article is for intermediate React learners. There are a lot of things in React meriting a discussion but our focus will be on passing data between components. In React, passing data is one of the most important topics because React works through components. Basically, components are like the subset of a React app.
So, we’ll cover:
- Component
- Passing data
1. Component
There are thousands of examples around you to know that what exactly a component is. If you want to develop an advanced or complex web app, then knowing about components is especially important for you.
Basically, a component helps to break down complex parts into a simple manner. It means to break down or divide small solutions into component forms and then merge them all together for a single output. Let’s see how components can be merged for a single output.
This is one of the simplest examples to understand components. These are the parts or components of the ceiling fan named “Base Plate, Downrod, Housing Cover, Motor, Blade, Pull Switch”. These all are tiny components and their work and shapes are different. But one thing is common between them which is that they are connected to each other by a single output which is air in this case. The same concept is also applicable in React, Angular, and Vue.js.
2. Passing data
In the above picture, we have seen that each component has its own shape and function, and also that they are passing electricity to each other. It is possible that if one component fails to work, then the rest of the components may stop working. But all this is totally dependent on the architectural structure, that is whether each component is dependent on the other or independent.
In the example of the fan, some of our components are dependent and some are independent. Base Plate is the root(main) component that is responsible for passing electricity to other components, and the Motor component is totally dependent upon Base Plate component. If the Base Plate passes the electricity, only then Motor can run — otherwise not.
Now technically, React components can have different logic and UI. There is only one way to pass data between components which are props. If you’re familiar with the React Context API, this is another way to pass data between components in React but this approach is also passing data by props.
Before passing the data, we must know how to store the data inside the component. There is only one way to store the React component data which is state. So, I have already said that this article is for intermediate-level learners. I hope you know what exactly state is but for a quick demo, a state is the part of React Virtual DOM; without state, React components can not change the UI. If you’re not familiar with state, then go ahead and familiarize yourself with state before reading this article.
So, for storing data in components, state is required. But for passing data between components, props come into the picture.
This is the simple React functional component. You can see there are two things in this component — one is an imported module component named Motor; and the second one is a prop named electricity and its value is true.
And this is the Motor.js Component. You can see here that we are just verifying the props value by the ternary operator — whether its value is true or not. If props.electricity is true, then execute the first string; if not, then the second one will be executed.
As we know, props are immutable (unchangeable). We cannot directly modify them but there are certain ways to change them. However, we will not be covering it in this article.
Remember, our article topic is passing data through components so our focus is on passing the data.
As we know, React uses a one-way data-binding approach and this makes React fast. The whole data will be available inside the root component and the root will pass the data to other components. If we want to pass BasePlate data to Motor component, then BasePlate Component should import the Motor component. And after importing, we must use props to pass data through it.
Now, BasePlate component has become the parent of Motor component because Motor is imported (appended) inside the BasePlate component. Now, BasePlate component has passed a prop named electricity and its value is true. And the output will look like:
If I change the value of the prop named electricity to false:
Then the output will look like this:
You can see how changing the value inside one component can change the behaviour of the other component based on props.
One thing to be noted — we just passed a prop form BasePlate to Motor component. But what if we have to pass data from the child (Motor) to the parent (BasePlate)? Then we must pass method/functions in props and these methods will take the values from their parameters. See BasePlate modified version.
In this modified version of BasePlate, we have just added two things — one is a method or function named generateElectricity; and the second thing is a state named data. And lastly, we have passed the generateElectricity method as a prop to Motor.
We have also made one change to the Motor component:
We just added a button tag to JSX and attached a onClick event and we have called the method by passing motor data during the on click event. And the output will now be:
Now, by default props.electricity is equal to false. That’s why the “No electricity found!” message is rendering. But if we click on the button, then generateElectricity method will be called and the amount state will be passed down to the generateElectricity function as a parameter and inside this function:
The amount parameter will hold the Motor.js state’s data which is named money in this case.
And money parameter came from Motor component state.
So, we have discussed two things:
- How to pass data from Parent to Child
- How to pass data from Child to Parent
And both approaches used props for passing data.
As you have noticed, data is passed from both Parent to Child and Child to Parent.
Both approaches have only one difference, which is callback function. And I hope you know about callback functions.
<button onClick={() => props.generateElectricity(money)}>Request for electricity</button>
The above line of code has one button and inside of it has one “On Click” event and this event has a callback function which is,
() => props.generateElectricity(money)
The above line has two functions — one is just calling the function (actually it is an arrow function); and the second function is generateElectricity(money) and this function came from the Parent Component named BasePlate.
Final thoughts
A parent component uses the props only to pass the data but a Child component uses the callback functions. Because of callbacks, we can send the data from child to parent. Thanks for reading.
Any suggestions are welcome here!
More content at plainenglish.io
