class App extends Component{

  // whatever written inside the constructor can be accessed anytime (properties)
  constructor(){
    super(); //it calls constructor method on component class

    this.state = {
      monsters: [],
      searchField: ''
    }

      }

 

     componentDidMount(){
        fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(users => this.setState( {monsters : users}))
      }

 

     render(){

    const { monsters, searchField} = this.state ;

    const filteredMonster = monsters.filter(monster => 
        monster.name.toLowerCase().includes(searchField.toLowerCase())
      );

    return (

      <div className= "App">

      <SearchBox 
        placeholder = 'Search monsters'
        handleChange = { 
          e => this.setState({ searchField: e.target.value})
        }/>

 

         <CardList monsters = {filteredMonster}/>
            {/**map returns fn iterated over all the elments present inside the object, in this case monsters. */}
        </div>
        );   
      }
    }
    export default App;