score:2

Accepted answer

whats wrong is that you are directly mutating the state and it doesn't re-render so the change is not reflected in your dom. use setstate to update state

componentwillmount() {
    booksapi.getall().then((books) => {
      const tempbooks = [];
      books.foreach((book) => {
        if (this.state.shelf === book.shelf){
          // console.log(book);
          tempbooks.push(book);
        }
      })
      this.setstate(prevstate => ({books: [...prevstate.books, ...tempbooks]}))
    })
  }

score:0

this is the correct fix. i want to add the book into the previous array.

  componentwillmount() {
    booksapi.getall().then((books) => {
      books.foreach((book) => {
        if (this.state.shelf === book.shelf) {
          this.setstate(prevstate => ({books: [...prevstate.books, book]}))
        }
      })
    })
  }

score:1 

render() {
    let books = this.state.books;
    return (<div classname="bookshelf">
      <h2 classname="bookshelf-title">{this.titles[this.props.shelf]}</h2>
      <div classname="bookshelf-books">
        <ol classname="books-grid">
          {books.map((book) => return(<book/>))}
        </ol>
      </div>
    </div>)
  }

Related Query

More Query from same tag