React js, error about keys when map on array

Question

I have an Array. I'm using map to show it in React. React throw me error about keys, I don't know why. Any ideas why is React throw this error?

{
    this.state.buttons.map((button, index) => {
       return (
       <>
         {index % 4 === 0 && (
           <div key={`break-${index}`} className="w-100" />
         )}
         <Button key={index} char={button} click={this.pushString} />
       </>
     )
})}

Possible duplicate of Understanding unique keys for array children in React.js — Aswin Ramesh
– Aswin Ramesh, Commented Oct 22, 2018 at 13:32

Chris · Accepted Answer · 2018-10-22 13:20:54Z

7

The issue here is that you passed your index to your div, which isn't the top-level component returned in your map() - your <> (React Fragment) is.

The quick-fix here would be to give it the key. However, since the short syntax doesn't support any attributes, you need to use the longer, explicit syntax to declare keys there:

<React.Fragment key={index}>

edited Oct 22, 2018 at 13:20

answered Oct 22, 2018 at 13:15

Chris

59.7k20 gold badges121 silver badges144 bronze badges

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

Comments

Roopak Puthenveettil · Accepted Answer · 2018-10-22 13:03:41Z

2

{this.state.buttons.map((button, index) => {
               return (
               <div key={index}>
                 {index % 4 === 0 && (
                   <div  className="w-100" />
                 )}
                 <Button char={button} click={this.pushString} />
               <div/>
             )
           })}

Keys need to be unique. Pass index as key

answered Oct 22, 2018 at 13:03

Roopak Puthenveettil

1,5052 gold badges14 silver badges28 bronze badges

3 Comments

czlowiek488 Over a year ago

I cant do it, bootstrap cry when I do.

czlowiek488 Over a year ago

Nothing, but layout is broken :/

Chris Over a year ago

@ŁukaszKlejszta, maybe it broke because of the div's in this answer that you didn't have before?

Collectives™ on Stack Overflow

React js, error about keys when map on array

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related