React - Adding component in Map function not adding

Question

I want to add components into the dom through using the map function over an array. {books.map((book) => <Book/>)}

However, it is not adding anything, it is as if the books array is empty? I printed books using {console.log(books)} and it is non empty. What is wrong here? I have attached my render function.

  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) => <Book/>)}
        </ol>
      </div>
    </div>)
  }

For anyone's info, I obtain the values of book through an api call.

  componentWillMount() {
    BooksAPI.getAll().then((books) => {
      books.forEach((book) => {
        if (this.state.shelf === book.shelf){
          // console.log(book);
          this.state.books.push(book);
        }
      })
    })
  }

Thank you if you understand what is going on.

probably the API call hasn't returned and you're using the books array. Can you provide more information, like whole file? — Ajay Gaur
– Ajay Gaur, Commented Nov 22, 2017 at 5:40

Ming Jin · Accepted Answer · 2017-11-22 09:33:33Z

2

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]}))
    })
  }

edited Nov 22, 2017 at 9:33

Ming Jin

3411 gold badge5 silver badges18 bronze badges

answered Nov 22, 2017 at 5:43

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ming Jin Over a year ago

This worked, thank you! I realised I should not directly mutate the state!

Ming Jin Over a year ago

kindly dont demand for an acceptance of answer. Why are you so impatient?

Ming Jin Over a year ago

This method is wrong, you do are adding an array into an array

Shubham Khatri Over a year ago

Updated the answer

Ming Jin Over a year ago

Doesnt matter, I have answered my own question

|

Nishant Joshi · Accepted Answer · 2017-11-22 05:40:24Z

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>)
  }

answered Nov 22, 2017 at 5:40

Nishant Joshi

2212 silver badges10 bronze badges

2 Comments

Shubham Khatri Over a year ago

No need of return if its a single line statement,

Ming Jin Over a year ago

No need to use return

Ming Jin · Accepted Answer · 2017-11-22 09:27:18Z

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]}))
        }
      })
    })
  }

answered Nov 22, 2017 at 9:27

Ming Jin

3411 gold badge5 silver badges18 bronze badges

Collectives™ on Stack Overflow

React - Adding component in Map function not adding

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related