How to use index and get rid of React Warning: Each child in a list should have a unique "key" prop?

Question

Hello I'm facing this error, question is how to propertly pass index in this component?

Error:

react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop.

Here is the component's code fragment:

                            {calculatorScreenshots.map((imgUrl: any, index) => {
                                return (
                                    <Zoom>
                                        {props.projectName == 'Calculator' && (
                                            <CardMedia
                                                key={index}
                                                component="img"
                                                height="200"
                                                alt="project picture"
                                                image={imgUrl}
                                            />
                                        )}
                                    </Zoom>
                                );
                            })}

Answer 1

The top-level <Zoom> component needs a key attribute as well.

Answer 2

You should be placing the key prop at the first element

                        {calculatorScreenshots.map((imgUrl: any, index) => {
                            return (
                                <Zoom key={index}>
                                    {props.projectName == 'Calculator' && (
                                        <CardMedia
                                  
                                            component="img"
                                            height="200"
                                            alt="project picture"
                                            image={imgUrl}
                                        />
                                    )}
                                </Zoom>
                            );
                        })}

Answer 3

You need to add a key props to the element you rendering with map().

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

In your case, you forgot to add a key={imgUrl} to <Zoom></Zoom> element whereas it's the first element rendered with map()

To turn off this warning, here the solution:

{calculatorScreenshots.map((imgUrl: String, index) => {
    return (
        <Zoom key={imageUrl}>
            {props.projectName == 'Calculator' && (
                <CardMedia
                  component="img"
                  height="200"
                  alt="project picture"
                  image={imgUrl}
                />
             )}
       </Zoom>
   )})}

You were almost there, you simply put the key props for the second mapped element, not for the first one <Zoom></Zoom>.

Happy coding ?

---

Some good pieces of information :

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

You can find more information here :

List and Keys with React

Index as a key is an anti-pattern by Robin Pokorny

Why keys are necessary for React?

Answer 4

You should write key in <Zoom /> component rather than in <CardMedia /> like this

<Zoom key={index} />

Note: Always write key to first item component/element you are rendering here it is <Zoom />.