Data binding in React

Question

What I want to do is when I type some text in an input field, it should appear in another place realtime.

Below is my input;

Answer 1

To bind a control to your state you need to call a function on the component that updates the state from the control's event handler.

Rather than have an update function for all your form fields, you could create a generic update function using ES6 computed name feature and pass it the values it needs inline from the control like this:

class LovelyForm extends React.Component {
  constructor(props) {
  alert("Construct");
    super(props);
    this.state = {
      field1: "Default 1",
      field2: "Default 2"
    };
  }

  update = (name, e) => {
    this.setState({ [name]: e.target.value });
  }

  render() {
    return (
      

        
 this.update("field1", e)} />
          {this.state.field1}
        
 this.update("field2", e)} />
          {this.state.field2}
      
    );
  }
}
ReactDOM.render(, document.getElementById('example'));