import React, { Component } from 'react';

class SearchBar extends Component {
  // defining state for class based components
  constructor(props) {
    // first and only function called automatically whenever a new instance is
    // created
    super(props);

    // properties that we wanted to record to thge state
    // term being search term
    this.state = { term: '' };
  }

  render() {
    // refactored 1.16.1 return <input onChange={this.onInputChange} />;
    // create an input with onChange property and have onChange trigger
    // onInputChange function
    // 1.16.1 refactor below; 1.16.2 took off parens from (event)
    return <input onChange={event => console.log(event.target.value)} />;
  }
  /* refactored as part of 1.16.1
  onInputChange(event) {
    // event object describes what event occurred
    // technical properties like what the text was that changed
    console.log(event.target.value);
  }
  */
}

export default SearchBar;

@@ -635,16 +635,65 @@
 ent)%0A   
+ // 1.18.1 changed to update state instead%0A    //
  return 
@@ -755,16 +755,289 @@
 e)%7D /%3E;%0A
+    // =%3E is the same as function(event) %7B%7D or a function definition%0A    // bad way to set state: this.state.term = event.target.value%0A    return (%0A      %3Cdiv%3E%0A        %3Cinput onChange=%7Bevent =%3E this.setState(%0A          %7B term: event.target.value %7D)%7D /%3E%0A      %3C/div%3E%0A    );%0A
   %7D%0A  /*

change event listener to update state instead of output