Understand One-way Data Binding in React the easy way!

One-Way Data Binding in React- illustration by Parnika Gupta

React is a popular JavaScript library for many reasons and one of the reasons is “one-way data binding”. If you want to understand React to its core, you should read along.

It’s a one-way road for the data

React apps are made up of carefully organized components. These components receive arguments(props) and return information using the return value of the render function. When data flows from the parent to the child component, it is known as the unidirectional flow of data.

Parent component passes information to child component using props. But it is also possible that a child component might end up requiring to change something in the UI. What to do in that case?

Is it possible to pass data from the child to parent component?

What if clicking a button in the child component changes the text in the parent component? How do we make sure that the parent component is aware that a button is clicked that is supposed to change its text?

This is achieved by the parent component by passing a callback function as a prop when calling the child component. The child component now calls this function when the button is clicked. This provides the parent component with all the required information about the state of the child component or the user actions.

Example

Before anything else, it is essential to understand which UI component should be changed based on the user input. This is where the concept of “state” comes in.

As we already discussed, we need to change the text in the parent component that is currently “Hello” to “World”. So, that is our element of the state.

Now, which component should the state live in? The child? The parent? Um.. so here are a few steps that would make it easier for you to decide where the state should reside:

• See which component renders something based on the state.
• Identify the highest component in the hierarchy that relies on the state.
• The state lives in either the highest component in the hierarchy or some other higher component.
• If you are unable to find a component worthy of owning the state, you can create a completely new component whose whole purpose is to hold the state. Then you can add this component as the highest component in the hierarchy.

In our case, it is easy to identify that the state should reside in the “Parent” component.

const [text, setText] = useState(“Hello”);

Now, what do we do to the “Parent” component? We pass the callback function as a prop from the parent component.

<Child changeText={(text) => setText(text)} />

Now we need a callback function in the “Child” component that is triggered when the button is clicked.

<button onClick={() => props.changeText(“World”)}>

With all individual elements in place, here is what the JavaScript files look for each component:

Parent.js

import React, { useState } from “react”;
import Child from “./Child”;
function Parent(props) {
const [text, setText] = useState(“Hello”);
return (
<div>
<h1>{text}</h1>
<Child changeText={(text) => setText(text)} />
</div>
);
}
export default Parent;

Child.js

import React from “react”;
function Child(props) {
return (
<div>
<button onClick={() => props.changeText(“World”)}>
Change the text
</button>
</div>
);
}
export default Child;

App.js

import Parent from “./Parent”;
function App() {
return (
<>
<div className=”App”>
<Parent />
</>
);
}
export default App;

How does it work?

In the “Parent” component, the content inside the<h1> tag is supposed to change, initially, it is set to “Hello”. Now when the button(in the child component) is clicked, it triggers the onClick event listener that calls the callback function passed from the “Parent” to the “Child” component, which changes the text to “World” and re-renders the component.

Conclusion

React follows the unidirectional approach, meaning that data flows from parent to child and not vice versa but if you really need to manipulate your parent component based on something in the child component, you can use a callback function and pass it as a prop from the parent to child.

This function updates the state in the parent component and once the state is changed, it passes down as props again. This allows the components to re-render and display the required results.

Here I explained passing data from child to parent component using functional components, the same can be achieved using class components as well.