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