How to use index and get rid of React Warning: Each child in a list should have a unique "key&q-CodePudding

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>
                                );
                            })}

CodePudding user response：

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

CodePudding user response：

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>
                            );
                        })}

CodePudding user response：

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