How to write a handler?

Question

JavaScript

First option:

class FormContainer extends Component {
  constructor() {
    super()
    this.state = {
      seo_title: ''
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
    this.setState({ [event.target.id]: event.target.value })
  }
  
  render() {
    const { seo_title } = this.state
    return (
      <form id="article-form">
        <Input
          text="SEO title"
          label="seo_title"
          type="text"
          id="seo_title"
          value={seo_title}
          handleChange={this.handleChange}
        />
      </form>
    )
  }
}

Second option:

class FormContainer extends Component {
  state = {
    seo_title: ''
  }

  handleChange = event => {
    this.setState({ [event.target.id]: event.target.value })
  }

  render() {
    const { seo_title } = this.state
    return (
      <form id="article-form">
        <Input
          text="SEO title"
          label="seo_title"
          type="text"
          id="seo_title"
          value={seo_title}
          handleChange={this.handleChange}
        />
      </form>
    )
  }
}

Answer 1

The second option is the unspoken standard in the React community. This uses the experimental babel-plugin-transform-class-properties syntax .
The first option is preferable when you need to make the component inherit, since the functions of the class property are not inherited.