Reactjs Warning: child in a list should have a unique key" prop

Viewed 20

i Am Getting This Error Even After Every Id Have Unique Key Prop

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,
    }]

  }]

This is error i am getting Warning: Each child in a list should have a unique "key" prop.

Check the render method of QuestionsDetails. See https://reactjs.org/link/warning-keys for more information. at div at QuestionsDetails (http://localhost:3000/static/js/bundle.js:2904:66) at div at div at DisplayQuestions at Routes (http://localhost:3000/static/js/bundle.js:42928:5) at AllRoutes at Router (http://localhost:3000/static/js/bundle.js:42861:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:41670:5) at div at App

1 Answers

Try once by adding the index as a key.

like

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