Data binding in React with example

Data Binding in React:

Data-binding is a technique that binds data sources from the provider and consumer together and synchronizes them.

in React, there’s no two-way data-binding.

DataBinding means sharing data between components to view and view to components.

So when you want to implement that feature, try to define a state, and write like this, listening events, update the state, and React renders for you:

Data binding in React can be achieved by using a controlled input. A controlled input is achieved by binding the value to a state variable and an onChange event to change the state as the input value changes.

import React, { Component } from 'react'

export class Databind extends Component {
    constructor(){
        super();
        this.state = {FirstName:'Yogesh',LastName:'Sharma'};
    }
    changename = (e) => {
        this.setState({FirstName:e.target.value});
    }
    render() {
        return (
            <div>
                
                <input type="text" onChange={this.changename} value={this.state.FirstName} />
                <p>Your First Name is {this.state.FirstName}</p>
            </div>
        )
    }
}

export default Databind