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} />
  ]}
/>

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 ponent are

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

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

• javascript
• reactjs
• eslint

• You may as well use the variant prop value as the key for each Icon in the array. – Emile Bergeron Commented Apr 2, 2019 at 15:16
• is it necessary for each item in an array to have a key prop? even though im not iterating . @EmileBergeron – Adam Commented Apr 2, 2019 at 15:17
• 1 You might not be iterating but RadioButtons ponent will be. – Jamie Dixon Commented Apr 2, 2019 at 15:18
• 2 Also it doesn't matter about iterating. Every time you stick an array into your JSX you'll need to add keys or you'll get this warning. Remember that .map just returns you a new array, so iterating or not, you're still rendering an array which needs keys, – Jamie Dixon Commented Apr 2, 2019 at 15:18
• 1 React uses it to identify similar sibling ponents. When you loop, really, you're just returning a new array with map, so it's the same. – Emile Bergeron Commented Apr 2, 2019 at 15:19

1 Answer 1

Since this question has no answer, I'll just reiterate what's in the ments: 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 ponents to the page's DOM
2. Events happen, changing state
3. React re-renders the ponents 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 ponents to the page's DOM
2. Events happen, changing state
3. React re-renders the ponents 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 acplish 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 es 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.