I am new to react js and i'm trying to pass a data from one component to another using Link to and this method is what i found on the net..
ERROR: index.js:1 Warning: Each child in a list should have a unique "key" prop.
Check the render method of Videos. See https://reactjs.org/link/warning-keys for more information.
at http://localhost:3000/static/js/vendors~main.chunk.js:134999:31
at Videos (http://localhost:3000/static/js/main.chunk.js:5570:81)
at div
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:135601:29)
at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:135803:29)
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:135232:30)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:134853:35)
at div
at App
Videos.js
function Videos() {
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>
)
}
export default Videos;
VideoPlayer.js function VideoPlayer({ videoTitle }) { return (
but my focus on this question is why is it still looking for a key when i already put a key on ?
You need to give an unique key to Link not to VideoCard.
vids.map(({ id, data }) => (
<Link key={id} to={{ pathname: `/play/${id}`, data: data}}>
{console.log(id)}
<VideoCard
videoTitle={data.videoTitle}
videoDate={data.videoDate}
videoCaption={data.videoCaption}
videoUrl={data.videoUrl}
/>
</Link>
))