My code isn't hitting componentDidMount and returning back the data nor hitting the console.log within componentDidMount. The API is working fine.

It was working fine until I added 'searchTerm' state and onChangeHandler. Any ideas? Because of that all my component props that I'm sending down is returning undefined.

    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;