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

Time:09-20

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

CodePudding user response:

in map function also get another index parameter and set that value to key .

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

CodePudding user response:

As mentioned in comments, you should have some duplicated ids in your questions. To avoid this error, you can use index instead of id eg:

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

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

CodePudding user response:

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