refactoring-react-es6-class-components-with-property-initialisers-2

refactoring-react-es6-class-components-with-property-initialisers-2.js

class Form extends ReactComponents {

  state = {id: ''}

  submitHandler = () => {
    // do more things here ....
    // then dispatch action
    this.props.onSubmitHandler()
  }

  nameInputHandler = (e) => {
    // to dispatch action (redux)
    this.props.onNameChangeHandler(e.target.value)
  }

  idInputHandler = (e) => {
    // update local state
    this.setState({id: e.target.value})
  }

  render() {
    return (
      <form>
        <label for="firstname">First name</label>
        <input 
          type="text" name="firstname" id="firstname"
          onChange={this.nameInputHandler}
        />
        <label for="id">Id</label>
        <input 
          type="text" name="firstname" id="firstname"
          onChange={this.idInputHandler}
        />
        <button type="submit" onSubmit={this.submitHandler}>
          Submit
        </button>
      </form>
    )
  }
}