Soy nuevo en reaccionar js y estoy tratando de pasar datos de un componente a otro usando Link to y este método es lo que encontré en la red.

ERROR: index.js:1 Advertencia: cada elemento secundario de una lista debe tener una propiedad de "clave" única.

Verifique el método de renderizado de Videos . Consulte https://reactjs.org/link/warning-keys para obtener más información. en http://localhost:3000/static/js/vendors~main.chunk.js:134999:31 en Vídeos (http://localhost:3000/static/js/main.chunk.js:5570:81) en div en Ruta (http://localhost:3000/static/js/vendors~main.chunk.js:135601:29) en Switch (http://localhost:3000/static/js/vendors~main.chunk.js :135803:29) en el enrutador (http://localhost:3000/static/js/vendors~main.chunk.js:135232:30) en BrowserRouter (http://localhost:3000/static/js/vendors~main .chunk.js:134853:35) en div en la aplicación

Videos.js

función Vídeos() {

 const [vids, setVids] = useState([]); useEffect(() => { db.collection('videos').orderBy('videoDate', 'desc').onSnapshot(snapshot => { setVids(snapshot.docs.map(doc => ({ data: doc.data(), id: doc.id }))) }) }, []); return ( <div className="Videos"> <h2> Available Lessons </h2> <div className="Videos__uploads"> { vids.map(({ id, data }) => ( <Link to={{ pathname: `/play/${id}`, data: data}}> {console.log(id)} <VideoCard key={id} videoTitle={data.videoTitle} videoDate={data.videoDate} videoCaption={data.videoCaption} videoUrl={data.videoUrl} /> </Link> )) } </div> </div> )

}

exportar videos predeterminados;

VideoPlayer.js function VideoPlayer({ videoTitle }) { return (

Hola{videoTitle}

) } //Solo estoy tratando de imprimir el título del video aquí... pero incluso el Hola no se está procesando.

pero mi enfoque en esta pregunta es ¿por qué todavía está buscando una llave cuando ya puse una llave?