Data Binding is the process of connecting the view element or user interface, with the data which 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 to be displayed 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:
- Component to View: Any change in component data would get reflected in the view.
- View to Component: Any change in View would get reflected in the component’s data.
In order to demonstrate the code examples, we have to create a basic React application using the following steps.
Creating React Application:
-
Step 1: Create a React application using the following command:
npx create-react-app foldername
-
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure: It will look like the following.
Project Structure
Implementing Component to View Data Binding:
Write down the following code in the App.js file. Here, App is our default component where we have written code.
App.js
import React, { Component } from 'react'; class App extends Component { constructor() { super(); this.state = { subject: "ReactJS" }; } render() { return ( <div style={{ textAlign: "center" }}> <h4 style={{ color: "#68cf48" }}>GeeksForGeeks</h4> <p><b>{this.state.subject}</b> Tutorial</p> </div> ) } } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Output after starting the React App
Explanation: The component contains a heading, a paragraph, and a state variable subject. The value of this state variable is bound to both the heading and paragraph element and any change in the state variable i.e. subject will reflect in the view part.
Implementing View to Component Data Binding:
We cannot directly apply View to Component data binding in ReactJS, for this we have to add event handlers to the view element.
Write down the following code in the App.js file. Here, App is our default component where we have written code.
App.js
import React, { Component } from 'react'; class App extends Component { constructor() { super(); this.state = { subject: "" }; } handleChange = event => { this.setState({ subject: event.target.value }) } render() { return ( <div> <h4 style={{ color: "#68cf48" }}>GeeksForGeeks</h4> <input placeholder="Enter Subject" onChange={this.handleChange}></input> <p><b>{this.state.subject}</b> Tutorial</p> </div> ) } } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Explanation: The component contains a heading, a paragraph, an input field, and a state variable subject. Here we are using the onChange event when a user enters the value in the input field the change is reflected in the state variable subject, and we can see the changed value in view.
