Looping nested array Object in ListView React native

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