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;