import React, { Component } from 'react'

//class-based component (ES6)
class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = { term: '' }
  }

  render() { //method definition in ES6
    return <input onChange={event => console.log(event.target.value)} />;
  }

}

export default SearchBar;
import React, { Component } from 'react'

//class-based component (ES6)
class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = { searchInput: '' } //This is the only time we set state like this. We usually use setState
  }

  render() { //method definition in ES6
    return (
      <div>
      <input onChange={event => this.setState({ searchInput: event.target.value })} />
      <br/>Value of the input: { this.state.searchInput }
      </div>
    )
  }

}

export default SearchBar;
Set the state of the component and output it to the screen