Reactjs Question posted in
The new location for the React Documentation can be found here.

ReactJS each child should have unique key

I have following code where i am using book.id to as key, but for some reason it does not work.

<h1>Book shop</h1>
        <div className="books">
            {books.map(book=>(
                <div className="book" key={book.id}>
                    {book.cover && <img src={book.cover} alt=""/>}
                    <h2>{book.title}</h2>
                    <p>{book.description}</p>
                    <span>{book.price}</span>
                    <button className="delete" onClick={()=>handleDelete(book.id)}>Delete</button>
                    <button className="update">Update</button>
                </div>
            ))}
        </div>

The error i get is following (when doing inspect page in browser)

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Books`. See https://reactjs.org/link/warning-keys for more information.
    at div
    at Books (http://localhost:3000/static/js/bundle.js:377:76)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:39894:5)
    at Routes (http://localhost:3000/static/js/bundle.js:40596:5)
    at Router (http://localhost:3000/static/js/bundle.js:40530:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:38471:5)
    at div
    at App

My code is written in React (front) and Nodejs (backend), and am having list of books containing several book entries which i am trying to update or delete, but then am getting 404 Not found message(because of not correct id?) (in my db it is book.id key) and am trying to see how can this be fixed. Thank you for reading, i am very appreciative if anyone has an idea why this happens.
(this below is how it looks in mysql, and ID is being auto incremented)

ID  title  description  cover  price
1   test title  description cover.png   123
2   title from backend  description cover from backend  100
3   title from backend2 description2    cover from backend2 221
4   title from backend2 description2    cover from backend2 103
5   asdfg title some description    coverrr 52
6   title123        cover2  3579
7   Titles      covered 50
Tags:

2

Answers


  1. 0
    1. Ensure Uniqueness of book.id: Double-check your database and make sure that the id values for each book are unique
      2.Use a Combination of Properties as key: If the id values are not unique, you can try using a combination of properties as the key.

    Example

    Login or Signup to reply.
  2. 0

    Looks like you are missing a bracket. This should work

    <h1>Book shop</h1>
        <div className="books">
            {books.map((book)=>(
                <div className="book" key={book.id}>
                    {book.cover && <img src={book.cover} alt=""/>}
                    <h2>{book.title}</h2>
                    <p>{book.description}</p>
                    <span>{book.price}</span>
                    <button className="delete" onClick={()=>handleDelete(book.id)}>Delete</button>
                    <button className="update">Update</button>
                </div>
            ))}
        </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search