Question 50822 in Javascript Question posted in
A very good W3school tutorial can be found here.

react_devtools_backend.js:2655 Warning: Each child in a list should have a unique "key" prop – Javascript

I know the error. It says that I need to place a key={object.id} in the map() function of my code. I have that but the error still shows on the browser console. Any idea why this is happening?

          <>
            <section className="bg-light py-5">
                <div className="container">
                    <div className="row justify-content-center">
                        <div className="col-lg-10">
                            <h1 className="post-archive-tag" >Recent Rants</h1>
                            {this.state.rants.map((rant) => (
                              <div key={rant.id} >
                            <Link className="post-archive-item" to={`/rant/${rant.slug}`}>
                                <h1>{ rant.title }</h1>
                            </Link>
                            {rant.categories.map((category) => (
                            <small className="post-archive-meta-details-name"><Link className="post-archive-meta-details-name text-dark font-weight-bold" to={`/category/${category.slug}`}>#{category.slug} </Link></small>
                            ))}                                                                   
                            <hr className="my-4" />
                            </div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>
          </>
Tags:

2

Answers


  1. 0

    Make sure that the key rant.id you are providing is unique to the div element, as there are few chances that the looping is done in same sections with key as id so somehow the id gets duplicated if it is not mongo id.

    Login or Signup to reply.
  2. 0

    You need to specify unique key on the first tag inside every map function.
    I see you have two maps. One is mapping over this.state.rants and other is mapping over rant.categories.

    So inside rant.categories also you need to add key prop for <small className="post-archive-meta-details-name" key={SOMETHING UNIQUE}>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search