Data binding in React Js

What is two-way data binding?

Two data binding means, the data we changed in the view has updated the state & the data in the form has updated the view.

Implementing View to Component Data Binding:

We cannot directly implement View to Component data binding in ReactJS. For this, we need to add event handlers to the view element.

Data Binding connects the view element or user interface with the data that populates it. 

• In ReactJS, components are rendered to the user interface, and the component’s logic contains the data to be displayed in the view (UI). The connection between the data shown in the view and the component’s logic is called data binding in ReactJS.
• One-way Data Binding: ReactJS uses one-way data binding. In one-way data binding, one of the following conditions can be followed: –

1. Component to View: Any change in component data would get reflected in the view.
2. View to Component: Any change in View would get reflected in the component’s data.

Data binding in React can be achieved by using a controlled input. React apps are organized as a series of nested components. These components are functional: they receive information through arguments (represented in the props attribute) and pass information via their return values (the return value of the render function). This is called unidirectional data flow. Data is passed down from components to their children. It’s pretty easy to see how to pass information from a parent component to a child component that it is calling. We’ve already looked at how to use props to do that. But what about when you want something triggered in a child component to be reflected somewhere else in the UI? This is a very common situation to change the state as the input value changes. 

Let’s Imagine

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? The parent component achieves this by passing a callback function when calling the child component. The child component now calls this function when the button is clicked. It provides the parent component with all the required information about the state of the child component or the user actions.

The code for the button component shouldn’t know anything about the parent it is changing. So how does the parent component, which is responsible for rendering its own background color, see when the button was clicked?

The answer is for the parent component to pass one of its own functions as a callback in a prop when calling the child component. The child component can then call this when triggered, supplying the necessary information about its state or the user’s actions. Essentially, we end up with a child component that will call whatever callback the parent provides when the user triggers an action. 

It’s a one-way road for the data in React.

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 data flow.

The parent component passes information to the child component using props. But it is also possible that a child component might need to change something in the UI. What to do in that case?