Objects are not valid as a React child use an array instead

Question

I'm getting "Objects are not valid as a React child" on this block:

<table className="table">
        <thead>
          <tr>
            <th scope="col">Title</th>
            <th scope="col">Genre</th>
            <th scope="col">Stock</th>
            <th scope="col">Rate</th>
            <th scope="col"></th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          {movies.filter(movie => (
            <tr key={movie._id}>
              <td>{movie.title}</td>
              <td>{movie.genre.name}</td>
              <td>{movie.numberInStock}</td>
              <td>{movie.dailyRentalRate}</td>
              <td>
                <Like
                  onClick={() => this.handleLike(movie)}
                  liked={movie.liked}
                />
              </td>
              <td>
                <button
                  onClick={() => this.handleDelete(movie._id)}
                  className="btn btn-danger m-2"
                >
                  Delete
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

The exact error message reads: Error: Objects are not valid as a React child (found: object with keys {_id, title, genre, numberInStock, dailyRentalRate, publishDate, liked}). If you meant to render a collection of children, use an array instead.

No matter what I do to troubleshoot this the error won't go away. Can anyone explain ?

symlink · Accepted Answer · 2019-12-15 02:02:53Z

1

This:

<tbody>
      {movies.map(movie => (
        <tr key={movie._id}>
          <td>{movie.title}</td>
          <td>{movie.genre.name}</td>
          <td>{movie.numberInStock}</td>
          <td>{movie.dailyRentalRate}</td>
          <td>
            <Like
              onClick={() => this.handleLike(movie)}
              liked={movie.liked}
            />
          </td>
          <td>
            <button
              onClick={() => this.handleDelete(movie._id)}
              className="btn btn-danger m-2"
            >
              Delete
            </button>
          </td>
        </tr>
      ))}
</tbody>

Should look like this:

<tbody>
    <MovieComponent
        movie={movie}
        likeOnCLick={this.handleLike(movie)}
    />
</tbody>

You're not filtering anything, so just use map(), and pass the results into a React.Component that you define elsewhere.

answered Dec 15, 2019 at 2:02

symlink

12.2k7 gold badges31 silver badges57 bronze badges

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

1 Comment

mr_incredible Over a year ago

Yep .... you're spot on. I used filter instead of map by mistake.

Thomas Grástein · Accepted Answer · 2019-12-15 02:03:47Z

0

The filter method is used to select certain items of an array. It seems that you have confused this with the map method, which should work in this scenario.

filter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

answered Dec 15, 2019 at 2:03

Thomas Grástein

835 bronze badges

1 Comment

mr_incredible Over a year ago

Yes, I used filter instead of map.

Collectives™ on Stack Overflow

Objects are not valid as a React child use an array instead

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related