query trim not a function (how to debug) - reactjs

Question

I am new to react and trying to understand how to debug and figure out how/why query trim is not a function below:
Full code:
import React, { Component } from 'react';
import {BrowserRouter as Router} from 'react-router-dom';
import { Link } from 'react-router-dom';
import * as BooksAPI from './data/BooksAPI';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
const BookSearch = observer(class BookSearch extends Component{
state = observable({
query: '',
books: []
})
searchBooks = (query) =>{
this.setState({ query: query.trim() }); <----- here
BooksAPI.search(query, 20).then((books) =>{
console.log(books);
this.setState({ books: books });
})
}
render(){
const { query } = this.state;
const bookSearch = this.state.books.map((book) =>
<li key={book.id}>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${ book.imageLinks.thumbnail })` }}></div>
<div className="book-shelf-changer">
<select onChange={(event) => this.props.bookChange(book, event.target.value)}>
<option>Move to...</option>
<option value="currentlyReading">Currently Reading</option>
<option value="wantToRead">Want to Read</option>
<option value="read">Read</option>
<option value="none">None</option>
</select>
</div>
</div>
<div className="book-title">{ book.title }</div>
<div className="book-authors">{ book.authors.map((author) =>
<span key={ author + book.title } >{ author }</span>
)}</div>
</div>
</li>
) ;
return(
<Router>
<div className="App">
<div className="search-books">
<div className="search-books-bar">
<Link className="close-search" to='/'>Close</Link>
<div className="search-books-input-wrapper">
<input
type="text"
placeholder="Search by title or author"
onChange={ this.searchBooks}
/>
</div>
</div>
<div className="search-books-results">
<div className="bookshelf">
<h2 className="bookshelf-title">{ this.state.query }</h2>
<div className="bookshelf-books">
<ol className="books-grid">
{ bookSearch }
</ol>
</div>
</div>
</div>
</div>
</div>
</Router>
)
}
})
export default BookSearch

Answer 1

The onChange handler of an <input> component gets passed an event (which is a react synthetic event instance) rather than just the value of the input:
You can access the actual value via event.target.value:
searchBooks = (event) =>{
this.setState({ query: event.target.value.trim() });
// ...
}