{"size": 915, "ext": "js", "max_stars_repo_path": "src/components/search_bar.js", "max_stars_repo_name": "WichoFlores/ReactYT", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/search_bar.js", "max_issues_repo_name": "WichoFlores/ReactYT", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/search_bar.js", "max_forks_repo_name": "WichoFlores/ReactYT", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 18.6734693878, "max_line_length": 91, "alphanum_fraction": 0.6240437158}
import React, { Component } from 'react';


// Functional component
// const SearchBar = () => {
//   return <input />;
// }

// Class component

class SearchBar extends Component {

  //State: Whenever the state is changed,
  // the component re-renders with all its children

  constructor(props) {
    super(props);


    //term = search term
    this.state = {term: ''};

    //Never manipulate state by assigning a new value
  }

  // What will be rendered

  //Controlled Component: The state tells the input how to change, not the other way around
  render() {
    return (
      <div className="search-bar">
        <input
        value={ this.state.term }
        onChange={event => this.onInputChange(event.target.value)} />
      </div>
    );
  }

  // // Event Handler
  //
  onInputChange(term) {
    this.setState({ term });
    this.props.onSearchTermChange(term);
  }

}

export default SearchBar;
