Mi código no está accediendo a componentDidMount y devolviendo los datos ni accediendo a console.log dentro de componentDidMount. La API está funcionando bien.

Estaba funcionando bien hasta que agregué el estado 'searchTerm' y onChangeHandler. ¿Algunas ideas? Debido a eso, todos mis accesorios de componentes que estoy enviando hacia abajo regresan indefinidos.

 constructor(props) { super(props) this.state = { allStudents: [], searchTerm: " ", } } componentDidMount() { fetch(API) .then(resp => resp.json()) .then(students => { console.log("app", students) this.setState({ allStudents: students.students }) }); } onSearchHandler = event => { console.log(event.target.value) event.preventDefault(); this.setState({ searchTerm: event.target.value}) } render () { const { allStudents, searchTerm} = this.state return ( <div className="App"> <div> {console.log(allStudents)} <input style={{ width: '100%', fontSize: 'x-large', border: '0', outline: 'none'}} type='text' placeholder='search by name...' onChange={this.onSearchHandler} /> </div> <hr /> <StudentContainer allStudents={allStudents} searchTerm={searchTerm} onSearchHandler={this.onSearchHandler} /> </div> ) } } export default App;