why do I get "`key` is not a prop." in React?

user_10353952 0
Viewed 1126

So I have the code below, with bookList_object being a bunch of JSON objects I fetched from backend.

   _renderBookList = () => {
        const books = this.state.bookList_object.map((this_book, index) => {
        return <BookList 
          body={this_book.body}
          created_at={this_book.created_at}
          key = {index}
        />
    })

Now, I've learned that there has to be key when having multiple children. So I've used index parameter to assign each id to the key prop. But then I get this error:
"BookList: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop."

What have I done wrong?
Also, I already have id field in each of my object. Is there a way to use id instead of key?

Thank you very much in advance. :)

reactjs
1 Answers

I recently had this Warning. It happened because I tried to assign a key to some elements in two different parts of the code. The warning pops up when the key prop is accessed a second time.

Find out where else the component is being assigned a key. Then choose only one place to assign a key.

user_181242110
Related