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}/>
))