Reactjs Render Error Each child in a list should have a unique "key" prop

Viewed 52

My QuestionList.jsx File Code Is

import React from 'react'
import Questions from './Questions'

const QuestionList = ({questionList}) => {
  return (
    <>
      {questionList.map((question) => (
        <Questions question={question} key={question.id}/>
      ))}
    </>
  )
}

export default QuestionList

The error I am getting while rendering things are visible but getting this error in console and the link is not getting it.

react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `QuestionList`. See https://reactjs.org/link/warning-keys for more information.
    at Questions (http://localhost:3000/static/js/bundle.js:872:5)
    at QuestionList (http://localhost:3000/static/js/bundle.js:794:5)
    at div
    at div
    at HomeMainbar (http://localhost:3000/static/js/bundle.js:596:81)
    at div
    at div
    at Questions
    at Routes (http://localhost:3000/static/js/bundle.js:42703:5)
    at AllRoutes
    at Router (http://localhost:3000/static/js/bundle.js:42636:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:41445:5)
    at div
    at App
import React from 'react'
import { Link } from 'react-router-dom'

const Questions = ({question}) => {
  return (
    <div className='display-question-container'>
        
        <div className='display-votes-ans'>
            <p>{question.upVotes}</p>
        <p>Up Votes</p>
        </div>
        <div className='display-votes-ans'>
            <p>{question.downVotes}</p>
            <p>Down Votes</p>
        </div>
        <div className='display-votes-ans'>
            <p>{question.noOfAnswer}</p>
            <p>Answers </p>
        </div>
        <div className="display-question-details">
            <Link to={'/Questions/${question.id}'} className='question-title-link'>{question.questionTitle}</Link>
            <div className='display-tags-time'>
                <div className='display-tags'>
                    {
                        question.questionTags.map((tag) =>(
                            <p key={tag}>{tag}</p>
                        ))
                    }
                </div>
                <p className='display-time'>
                    asked{question.askedOn} { question.userPosted }
                </p>
            </div>
        </div>
    </div>
  )
}

export default Questions

This Is My Question.jsx File

Questions array is:

var questionsList = [{
    _id: '1',
    upVotes: 3,
    downVotes: 2,
    noOfAnswers: 2,
    questionTitle:"What Is Function Hmm?",
    questionBody:"It Meant To Be",
    questionTags:["javascript", "r", "python"],
    userPosted: "mano",
    userId: 1,
    askedOn:"jan 1",
    answer: [{
      answerBody: "Answer",
      userAnswered: "kumar",
      answerOn: "jan 2",
      userId: 2,
    }]
  },{
    _id: '2',
    upVotes: 3,
    downVotes:2,
    noOfAnswers: 0,
    questionTitle:"What Is Function In JS?",
    questionBody:"It Meant To Be",
    questionTags:["javascript", "python"],
    userPosted: "lano",
    userId: 1,
    askedOn:"jan 1",
    answer: [{
      answerBody: "Answer",
      userAnswered: "kumar",
      answerOn: " jan 2",
      userId: 2,
    }] 
  },{
    _id: '3',
    upVotes: 1,
    downVotes:0,
    noOfAnswers: 1,
    questionTitle:"How To Use A Function?",
    questionBody:"By Adding Const",
    questionTags:["javascript", "r", "python", "Css"],
    userPosted: "mano",
    userId: 1,
    askedOn:"jan 2",
    answer: [{
      answerBody: "Answer",
      userAnswered: "kumar",
      answerOn: " jan 2",
      userId:2,
    }]

  }]
3 Answers
{question.questionTitle}
write this code below :

     <Link to={pathname: "/Questions"}>{question.questionTitle}</Link>

or you can write like this also :

This is the actual answer for your code :
    <Link to={`/Questions/${question.id}`} className='question-title-link'>{question.questionTitle}</Link>

maybe your data has same id's. check your data or where you mapping your data add second parameter: index.

and replace value of key with index.

questionList.map((question, index) => (
                <Questions question={question} key={index}/>
           ))

Related