1

I'm trying to get a feel for reactjs, new to front end development. Google Books API is simple so I decided to use it to build a react page that lists 10 books given the user input.

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

const GOOGLE_BOOKS_API = 'https://www.googleapis.com/books/v1/volumes?q=';
const GOOGLE_BOOKS_API_LIMIT = 'maxResults=10';

class BookItem extends React.Component {
  render() {
    return (
      <div>
      <img alt="Book" src={this.props.data.volumeInfo.imageLinks.thumbnail} />
      <span>{this.props.data.volumeInfo.imageLinks.thumbnail}</span>
      </div>
    );
  }
}

class BookResults extends React.Component {
  render() {
    const isBookResultsEmpty = !(this.props.books && this.props.books.length > 1);
    const bookItems = isBookResultsEmpty ? [] : this.props.books.map((book,index) =>
      <BookItem key={index} data={book} />
    );
    return (
      <div className='book-results'>
        {isBookResultsEmpty ? (
          <h1>No Results</h1>
        ) : (
          <div> {bookItems} </div>
        )}
      </div>
    );
  }
}

class BookSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bookQuery: '',
      books: []
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.getBooks = this.getBooks.bind(this)
  }

  getBooks() {
    let queryString = '';
    if (this.state.bookQuery && this.state.bookQuery.length > 1) {
      queryString = this.state.bookQuery.replace(/\s/g, '+');
      fetch(`${GOOGLE_BOOKS_API}${queryString}&${GOOGLE_BOOKS_API_LIMIT}`)
      .then(results => {
        return results.json();
        })
      .then(json => {
        this.setState({
          books: json.items
        });
      })
      .catch(e => console.log('error', e));
    }
  }

  handleInputChange(event) {
    this.setState({
      bookQuery: this.search.value
    },
      this.getBooks());
  }

  render() {
    return (
      <div className="book-search">
        <form>
          <input
            placeholder="Search for Books"
            ref={input => this.search = input}
            onChange={this.handleInputChange}
          />
        </form>
        <BookResults books={this.state.books} />
      </div>
    );
  }
}

ReactDOM.render(<BookSearch />, document.getElementById('root'));

I get an error when typing the input:

TypeError: Cannot read property 'thumbnail' of undefined

I added a check for the data in the BookResults component but the error still occurs. I assume it has to do with the state or props value changing while rendering, but I don't know enough about React to be sure

3
  • 1
    I think you just need to check the response JSON. Try logging value of this.props.data.volumeInfo in console. And check if it is imageInfo is available in your JSON response. Aug 6, 2018 at 2:13
  • As I can see from googleapis.com/books/v1/volumes?q=%27Javascript,maxResults=10, for some books imageLinks is not available. You need to check if it exists before accessing it's properties. Which is thumbnail. Aug 6, 2018 at 2:20
  • Such a simple oversight thank you for catching it! Good to have an extra pair of eyes Aug 8, 2018 at 12:44

1 Answer 1

3

Some books don't have imageLinks, so you need to make sure it is not undefined before you use it.

Example

class BookItem extends React.Component {
  render() {
    const { imageLinks } = this.props.data.volumeInfo;

    if (!imageLinks) {
      return null;
    }

    return (
      <div>
        <img alt="Book" src={imageLinks.thumbnail} />
        <span>{imageLinks.thumbnail}</span>
      </div>
    );
  }
}
1
  • 1
    I was able to confirm @Tholle's answer works. Check SandBox. here is the demo image. I also added lodash.debounce to make the query run every 300 milliseconds & changed onInputChange to onKeyUp. (Or else you will be flooding Google API)
    – dance2die
    Aug 6, 2018 at 2:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.