ReactJS Data Binding - GeeksforGeeks

21 May, 2021
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 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
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
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.
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.
Picked
ReactJS-Basics
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to redirect to another page in ReactJS ?
How to pass data from one component to other component in ReactJS ?
ReactJS useNavigate() Hook
ReactJS defaultProps
Axios in React: A Guide for Beginners
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript