I have an array of answers, sorted by the question they belong to, like this:
sortedAnswers= [[Answer1, Answer2, Answer3, Answer4],[AnswerA, AnswerB, AnswerC, AnswerD]...]
I'm trying to render a list of ListItemButton in React. I have tried before
{sortedAnswers.map((item) => {item} )}
But it doesn't work as expected, I get this:
I want each answer to have a ListItemButton, so 4 buttons per question. How can I get the answer for the first array in the button?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Use nested loops to iterate over all answers depending on how you want your layout to look:
const sortedAnswers = [ [Answer1, Answer2, Answer3, Answer4], [AnswerA, AnswerB, AnswerC, AnswerD] ]; {sortedAnswers.map(answers => ( {answers.map(answer => ( {answer} ))} ))}As you mentioned
Error: Cannot read property of undefined (read 'map'), please add conditional check before mapping.{sortedAnswers.length > 0 && ( {sortedAnswers[0].map((answer, index) => ( {answer} ))} )}