Learn React Hooks

Class component

The class component makes use of the constructor method in order to define state, and needs to rebind this in order to pass the handler method to the input field. The full class component code looks as follows:

import React from 'react'class MyName extends React.Component {    constructor (props) {        super(props)        this.state = { name: '' }        this.handleChange = this.handleChange.bind(this)    }    handleChange (evt) {        this.setState({ name: evt.target.value })    }    render () {        const { name } = this.state        return (            <div>                <h1>My name is: {name}</h1>                <input type="text" value={name} onChange={this.handleChange} />            </div>        )    }}export default MyName

As we can see, the class component needs a lot of boilerplate code to initialize the state object and ...