Looping nested array Object in ListView React native - reactjs

Question

I currently trying to play around with react-native..
I want to make a list view that get the dataSource from var which contain an object that have nested array inside.
var questionArray = [
{
question: "What is the emotion of the user? choose all that apply!",
answerArray: [
{ name: "Cheerful", status: true, answered: false },
{ name: "Impulsive", status: false, answered: false },
{ name: "Firm", status: false, answered: false },
{ name: "Merry", status: true, answered: false },
{ name: "Jumpy", status: false, answered: false },
{ name: "Energetic", status: false, answered: false },
{ name: "Glowing", status: false, answered: false },
{ name: "Animated", status: false, answered: false },
{ name: "Lively", status: false, answered: false },
{ name: "Creepy", status: false, answered: false },
{ name: "Excited", status: true, answered: false },
{ name: "Tense", status: false, answered: false },
{ name: "Unrestful", status: false, answered: false },
{ name: "Pleased", status: true, answered: false },
{ name: "Unrestful", status: false, answered: false },
{ name: "Hasty", status: false, answered: false },
{ name: "Delighted", status: true, answered: false },
{ name: "Hedonistic", status: false, answered: false },
{ name: "Eager", status: false, answered: false },
{ name: "Joyful", status: false, answered: false },
]
},
{
question: "What is the best way to describe this person's character? Choose all that apply.",
answerArray: [
{ name: "Cheerful", status: true, answered: false },
{ name: "Impulsive", status: false, answered: false },
{ name: "Firm", status: false, answered: false },
{ name: "Merry", status: true, answered: false },
{ name: "Jumpy", status: false, answered: false },
{ name: "Energetic", status: false, answered: false },
{ name: "Glowing", status: false, answered: false },
{ name: "Animated", status: false, answered: false },
{ name: "Lively", status: false, answered: false },
{ name: "Creepy", status: false, answered: false },
{ name: "Excited", status: true, answered: false },
{ name: "Tense", status: false, answered: false },
{ name: "Unrestful", status: false, answered: false },
{ name: "Pleased", status: true, answered: false },
{ name: "Unrestful", status: false, answered: false },
{ name: "Hasty", status: false, answered: false },
{ name: "Delighted", status: true, answered: false },
{ name: "Hedonistic", status: false, answered: false },
{ name: "Eager", status: false, answered: false },
{ name: "Joyful", status: false, answered: false },
]
}
];
and I called this variable inside render ListView which trigger renderRow function..
_renderRow( rowData, sectionID, rowID ) {
return (
<View>
<Text>{rowData.question}</Text>
<Text>{rowData.answerArray[0].name}</Text>
</View>
);
}
render() {
return (
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow.bind(this)}
/>
</View>
);
}
How do I render the loop inside this listView ?
Even the when I hard coded the index like above code, it's not working..
Thank you.

Answer 1

You should make two separate Components: Question & Answer
I've made a Codepen for you as an example, using your data
At first, I pass the questionsArray as prop to the ListView Component:
class Application extends React.Component {
render() {
return (
<div>
{ questionsArray.map((question, key) => <ListView key={`listview-${key}`} question={question} />) }
</div>
);
}
}
Then, you can pass the answers to the ListViewItem Component, like this:
class ListView extends React.Component {
render() {
return (
<div>
{this.props.question.question}
{this.props.question.answerArray.map((answer, key) => <ListViewItem answer={answer} />)}
</div>
);
}
}
This is the ListViewItem:
class ListViewItem extends React.Component {
render() {
return (
<div>
{this.props.answer.name}
</div>
);
}
}