score:7
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:
- react renders your components to the page's dom
- events happen, changing state
- 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:
- react renders your components to the page's dom
- events happen, changing state
- react re-renders the components that used that state to the virtual dom
- 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.
Source: stackoverflow.com
Related Query
- React esLint error: Missing "key" prop for element in array
- React project script linter error Missing "key" prop for element in iterator
- Missing "key" prop for element in iterator react/jsx-key in React
- React eslint error missing in props validation on for the word "props"
- React eslint error missing in props validation
- eslint: Missing "key" prop for element in iterator (react/jsx-key)
- In React how to add key prop to element passed as Object
- How to specify a key for React children when mapping over an array
- ESLint rule for Object & array dependencies in the React useEffect Hook
- TypeScript types for React component where prop is an array of objects?
- Implementing Google sign-in in React error - Invalid value for prop `data-callback` on <div> tag
- React JSX: Unique Key Prop in Conditional Array
- ESLint React PropTypes, 'prop' is missing in prop validation
- How do I fix a React TypeScript error with the return value of useHotkeys hook not matching the type of the div element ref prop
- React Router will not take array as prop for a component
- React throws undefined error for an existing element
- React Dumb component Typescript error: Element is not a constructor function for JSX elements, property 'render' is missing
- Add prop dynamically to last element in an array of React components
- react , missing unique key for map iteration
- React component throwing TypeScript error for function passed in as prop
- React array of objects mapping with missing key causing TypeError crash
- Highlight React JSX element for array of keywords
- Typescript error showing up when update method for state element by using React useState
- TypeScript React Functional Component - is missing the following properties from type 'Element': type, props, key error
- How do I iterate over an array of objects match a common element from another array and return the key value for "name"
- React Typescript Forcing a compile time error for empty array in props
- Does React ignore props that are array buffers for updating elements, if the key is the same?
- React key prop error even after adding it
- getting error React does not recognize the `handleChange` prop on a DOM element
- How to pass as prop for a React Element an object that has a huge number of properties?
More Query from same tag
- Pass react component inside dangerouslySetInnerHTML
- map through array and return result
- Why use the spread operator when calling 'setState()' in React?
- unable add required attribute to a ReactJS input component
- --fix doesn't fix the errors using eslint
- withSyles HOC does not pass innerRef along with other props when passing through React.forwardRef
- How can I pass the selected date(value) from react calendar to another component?
- react-rails gem pass hash in view helper react_component
- How to access props and state of react-select HOC
- How to update state of elements from array.map() separately?
- Reactjs app fetch an api has been block by cores even on server not localhost
- Passing object literal styled component
- How to compensate for fixed header using CSS smooth scrolling?
- I created a section to move between different parts of the site with the Router by NavBar in react
- Form layout with Material-UI components
- Pass Result of Function (Return) as a Prop in ReactJS
- How to create sticky full-page vertical lines with CSS
- why div not taking width of 90% of the total width?
- Firebase error while using firestore in NextJS
- Redux Form: How to handle multiple buttons?
- React – how to render additional component inside another mounted one?
- How to get JSDOM to work with typescript when unit testing with a Chai\Mocha setup?
- c.getBoundingClientRect is not a function
- React-Redux - Unique key warning on NavMenu
- How to use proxy in package.json in next.js?
- react-intl - date without day - just month/year
- unhandledRejection: TypeError: Cannot destructure property 'protocol' of 'window.location' as it is undefined
- React, API keys and intermediary services
- SyntaxError: Unexpected token: punc ())
- Webflow integration with React