Two way binding in React

React two way binding:

import React, { Component } from 'react';
import Input from './Input/Input';

class App extends Component {
  state = {
    inputValue: ''
  }

  inputChangeHandler(event){
    if(event && event.target){
      this.setState({
        inputValue: event.target.value
      });
    }
  }

  render() {
    return (
      <div className="App">
        <h1>React two way binding</h1>
        <Input change={(event)=>this.inputChangeHandler(event)} value={this.state.inputValue}/>
      </div>
    );
  }
}

export default App;
import React from 'react';
const input = (props) => {
    return (
        <div>
            <h2>The value is: {props.value}</h2>
            <input type="text" onChange={props.change} value={props.value}></input>
        </div>
    )
}
export default input;