0

I'm having trouble trying to traverse through a list of objects in JSX.

  renderBooks(book) {
    return(
      <div> A new book </div>
      {book.id}, {book.timeIn}
    );
  }


    render() {
        console.log("the values are", this.props.bookList);    
        return (
            <div >
              <h1> The Books </h1>
                   {this.props.bookList.map(this.renderBooks.bind(this))}
            </div>
        );
    }   
}

The above code works if I have a list of objects, but FireBase has sent me data that looks like this which is not a list of objects but an object of objects:enter image description here

Is there a way I can do something similar with this data as well as get the id (-KbMAsG9X...?)

UPDATE--- I tried this alternative method 

  renderBooks() {
    return _.map(this.props.bookList, (timeIn) => {
      return(       
        <li className="list-group-item">
            {timeIn}
            <button
              className="btn btn-danger right">

              Book Exists
            </button>
          </li>
        );
    });
  }

    render() {
        return (
            <div >
              <h1> The Books </h1>
              {this.renderBooks()}
            </div>
        );
    }
}

I can iterate but I still can't access the values of the objects like resolved or timeIn. The error I get is: 

Error: Objects are not valid as a React child (found: object with keys {address, resolved, timeIn})
lost9123193
  • 10,460
  • 26
  • 73
  • 113

1 Answers1

1

The problem is that timeIn (in return _.map(this.props.bookList, (timeIn) => { ... })) is, in fact, your "book" Object.

So, when react says:

Error: Objects are not valid as a React child (found: object with keys {address, resolved, timeIn})

It is saying that it doesn't know how to render your "book" object. You're trying to render that using {timeIn} (in this case, it's not the property timeIn, but the entire book object).

You just need to use the book object correctly. Something like that would work:

renderBooks() {
    return _.map(this.props.bookList, (book) => {
        return (
            <li className="list-group-item">
                {book.id} - {book.timeIn}
            </li>
        )
    });
}

Or, in a more fashion way (if you can use object destructuring):

renderBooks() {
    return _.map(this.props.bookList, ({ id, timeIn }) => {
        return (
            <li className="list-group-item">
                {id} - {timeIn}
            </li>
        )
    });
}

Hope it helps!

William Martins
  • 1,969
  • 1
  • 18
  • 22
  • This makes a lot of sense thanks! One question is there a way I can access the object name? "-KbMAsG9X" – lost9123193 Jan 26 '17 at 02:22
  • 1
    For sure! Lodash allows you to do that. You can use the second parameter in "map". For example: `_.map({ a: 1, b: 2}, (value, key) => console.log(value, key));` will have the object value inside `value` and the object key (in your case, the "-KbMAsG9X" inside `key`). – William Martins Jan 26 '17 at 02:36