Data binding in React

Data binding is a process of binding a UI component like textbox and code behind the object. For example, your input is:

<div className="post_input">


<input className='post_data_input_overlay' placeholder="Ask your question here" ref="postTxt"/>


Data binding can be done using controlled input. Controlled input is gained by binding value to a state variable and onChange event to change the state as the input value changes.

class App extends React.Component {

  constructor() {


    this.state = {value : ''}


  handleChange = (e) =>{



  render() {

    return (


        <input type="text" value={this.state.value} onChange={this.handleChange}/>






ReactDOM.render(<App/>, document.getElementById('app'));


<script src=""></script>

<script src=""></script>

<div id="app"></div>