迭代器中缺少元素的“键”道具

Question

import React from 'react'
import { motion } from "framer-motion"

type Props = {}

export default function Projects({}: Props) {
    const projects = [1,2];
  return (
    <motion.div  
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      transition={{ duration: 1.5 }}
      className='h-screen relative flex overflow-hidden flex-col text-left md:flex-row max-w-    full justify-evenly mx-auto items-center z-0'>
        <h3 className='absolute top-24 uppercase tracking-[20px] text-gray-500 text-2xl'>
            Proyectos
        </h3>

        <div className='relative w-full flex overflow-x-scroll overflow-y-hidden snap-x snap-mandatory z-20 scrollbar-thin scrollbar-track-gray-400/20 scrollbar-thumb-[#61ff45]/80'>
            {projects.map((project, i) => (
            <div className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'>
                <motion.img 
                    initial={{
                        y: -300,
                        opacity: 0
                      }}
                      transition={{ duration: 1.2 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      viewport={{ once: true }}
                      src="./img/PHP.png" 
                      alt="" 
                />
            
                <div className='space-y-10 px-0 md:px-10 max-w-6xl'>
                    <h4 className='text-4xl font-semibold text-center'>
                        <span className='underline decoration-[#61ff45]/50'> Caso de estudio {i + 1} de {projects.length}:</span>  Mini Php Lexer
                    </h4>
                    <div className='text-lg text-center md:text-left'>
                        Este es un analizador lexico el cual tiene como proposito procesar y evaluar un codigo en PHP y decir si este se puede ejecutar sin ningun problema, mostrando en pantalla el codigo completo y parte por parte lo que es cada cosa del codigo
                    </div>
                </div>
            </div>
            ))}
            </div>

        <div className='w-full absolute top-[30%] bg-[#61ff45]/10 left-0 h-[500px] -skew-y-12'/>
    </motion.div>
  )
}

Im trying to do a portfolio but when I code npm run dev, its show me "Hydration failed because the initial UI does not match what was rendered on the server." I think that the error is in this piece of code because in vscode appear that "Missing "key" prop for element in iterator". I dont really know a lot about these programming languages so I dont know what that error means.

Answer 1

write a key when using a map iterator

{projects.map((project, i) => (
            <div key={i} className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'>
                <motion.img ...

Answer 2

Whenever you put any loop for rendering. React requires key in the outer class.

In your case, you should add key like this.

{projects.map((project, i) => (
        <div key={project.id} className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'>

Please do not add index as a key as React official document mentioned here https://reactjs.org/docs/lists-and-keys.html