Handle the input by method of the component class

If we want to handle some data from input component, first of all we should declare a special method for that:

class SearchBar extends Component {
    render() {
        return <input/>;
    }

    onInputChange() {

    }
}

Afterwards, we should bind html part of input by declaring attribute onChange, which should reference that method:

class SearchBar extends Component {
    render() {
        return <input onChange={this.onInputChange}/>;
    }

    onInputChange() {

    }
}

For example, let's write in the console, what is written in input:

class SearchBar extends Component {
    render() {
        return <input onChange={this.onInputChange}/>;
    }

    onInputChange(event) {
        console.log(event.target.value)
    }
}

Also, we could do the same thing with arrow fucntion inside the onChange value, and get rid of the function:

class SearchBar extends Component {
    render() {
        return <input onChange={event => console.log(event.target.value)}/>;
    }
}