App.js

import React from 'react';
import './App.css';
import * as historyData from './history.json';
// import Event from './Event'

class App extends React.Component {
  state = {
    events: historyData.result.events
  }

  search = (event) => {
    event.preventDefault()
    const query = event.target.parentElement.children[0].value
    console.log(this.state.events)
    // 1. create a filtered list (array) based on the search query, using the .filter method on this.state.events, .includes on the description string
    // 2. setState to be the filtered list
    // 3. render the filtered array in render
  }
  
  render() {
    const centerHeading = {
      textAlign: 'center',
      color: 'red'
    }
    return (
      <>
        <h1 style={centerHeading}>Search for 20th Century Events</h1>
        <form>
          <input type="text" name="search" id="search"/>
          <input onClick={this.search} type="submit" value="Submit" id="submit" />
        </form>
      </>
    );
  }
}

// stateful component
// class, like object orientated in python
// using render(), which is a lifecycle method, kind of like an instance method in python

export default App;