Each child in a list should have a unique "key" prop console warning

Question

code is here

   <React.Fragment>
    <div className="js-container">
      <div className="js-sidecontent">
        {[{ title: "Js, values: ["s1", "s2"]}].map((f_list) => (
          <div className="js-sidecontent-container" key={f_list.title}>
            <button className="feature-title">{f_list.title}</button>
            {f_list.values.map((f_list_value) => (
              <button className="feature-title-list">{f_list_value}</button>
            ))}
          </div>
        ))}
      </div>
    </div>
  </React.Fragment>

I have the above code within the render method of React Component and I have the key-value as the property of parent div element. still, I am getting below Error in Console.

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

How it can be solved?

You nave a nested map. It will need a `key` at the top node too. — Brian Thompson, May 21 '20 at 14:08
`{ title: "Js, values: ["s1", "s2"]}` seems to be missing a " somewhere. — cbr, May 21 '20 at 14:08
Please, do some research before asking. A simple search on the warning text would have found many questions about this warning. — Heretic Monkey, May 21 '20 at 14:11

score 3 · Answer 1 · answered May 21 '20 at 14:08

3

You need to specify a key for the button too:

{f_list.values.map((f_list_value, idx) => (
    <button className="feature-title-list" key={idx}>{f_list_value}</button>
))}

answered May 21 '20 at 14:08

devcrp

1,323
7
17

score 0 · Answer 2 · answered May 21 '20 at 14:09

you can fix with code like this:

{f_list.values.map((f_list_value, index) => (
   <button className="feature-title-list" key={index}>{f_list_value}</button>
))}

If you render a list of element you have to add an extra attribute key. This attribute identifies uniquely your elements.

Each child in a list should have a unique "key" prop console warning

2 Answers2