Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

152
Views
i already have a Key in my component but why is it still looking for a unique key?

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 (

Hello{videoTitle}

) } //im just trying to print out the videoTitle here.. but even the Hello is not rendering.

but my focus on this question is why is it still looking for a key when i already put a key on ?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>
))
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!