CODEWITHSUNDEEP
javascriptreactjseslint
Adam
Adam

Reputation: 2517

React esLint error: Missing "key" prop for element in array

This is my Code

<RadioButtons
  type="test"
  field="test"
  optionInclude={['1', '2', '3']}
  optionOrder={['1', '2', '3']}
  updateValue={[
      { key: '1', value: 'test' },
      { key: '2', value: 'test2' },
      { key: '3', value: 'Other' }
  ]}
  icons={[
      <Icon variant="male" size={35} />,
      <Icon variant="female" size={35} />,
      <Icon variant="plus" size={35} />
  ]}
/>

When runnning EsLint i get this error:

70:33 error Missing "key" prop for element in array react/jsx-key 71:33 error Missing "key" prop for element in array react/jsx-key 72:33 error Missing "key" prop for element in array

Line 70 - 72 is the Icons Array so that is what the error is referring to.

The PropTypes for the RadioButtons component are 

RadioButtons.propTypes = {
    ...
    icons: PropTypes.array,
};

I thought this error was for when you iterate without the key prop.

Upvotes: 4

Views: 6257

Answers (1)

machineghost
machineghost

Reputation: 35806

Since this question has no answer, I'll just reiterate what's in the comments: when you repeate any element in React (including your custom Icon element) those repeated elements must all have key attributes defined.

Long Explanation About the Virtual DOM For the Curious

The reason for this has to do with React's Virtual DOM. A simple understanding of React works like this:

  1. React renders your components to the page's DOM
  2. Events happen, changing state
  3. React re-renders the components that used that state to the DOM

But if it was that simple, React would be incredibly wasteful. Imagine for instance you have a <ul> ...

<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  <!--... -->
  <li>Item #25</li>
</ul>

(Presumably you're using a map to generate that in React, but how exactly you make the <ul> is irrelevant.)

Now, imagine that you move item #25 to be the first item in the list: if you simply re-rendered everything, you'd have to re-render 25 <li> elements ... even though only one of them changed.

To avoid such unnecessary (and very costly, performance-wise) DOM changes, React uses a copy of the DOM, known as the Virtual DOM, and the actual process looks more like:

  1. React renders your components to the page's DOM
  2. Events happen, changing state
  3. React re-renders the components that used that state to the Virtual DOM
  4. React does a "diff" of the old and new Virtual DOMs, and only updates the actual DOM for the parts that changed in the virtual one

This is a major performance enhancement of using React (vs. using say JQuery's .html() method to accomplish the same thing)!

But do you remember when we moved item #25 to #1 a moment ago? From React's perspective, that could have been a move of #25 to #1 ... or it could have been the deletion of #25 and the insertion of a brand new <li> at #1 ... or it could have been a series of updates (of #1 => 25, #2 => #1, #3 => #2, ...)

In other words, React has no way of magically knowing which <li> is which. Without a unique identifier on each one, a moved element can look like stuff got deleted/created, or like lots of stuff got updated.

This is where the key prop comes in: whenever you repeat elements (like those <li>s), React has difficulty telling them apart ... but it needs to to be able to use the Virtual DOM to make your app faster.

This is why it's not required that you add a key to every repeated element (React will still work if you don't) ... but you will get lots of warnings about it ... because it means you're making your app needlessly slower.

Upvotes: 11

Related Questions