How to render data to make Section List in React Native

Question

iam new to react native with native base and i need to render data with Native Base list divider but i think iam doing it wrong. here is my code
const routes = [ { title: "Menu", content: ["Recent Article", "Categories"] }, { title: "Social Media", content: ["Discord", "Twitch"] } ];

          <List
        contentContainerStyle={{ marginTop: 120 }}
        dataArray={routes} renderRow={(data) =>
       <View>
        <ListItem itemDivider>
          <Text>{data.title}</Text>
        </ListItem>    
            <ListItem
              button
              onPress={() => this.props.navigation.navigate(data.content)}
            > 
              <Text>{data.content}</Text>
            </ListItem>
      </View>
        }></List>

here is the result result

hope you can help me

Answer 1

data.content is an array, you need to iterate to display each item separately.

Like,

<List
    contentContainerStyle={{ marginTop: 120 }}
    dataArray={routes} renderRow={(data) =>
      <View>
        <ListItem itemDivider>
          <Text>{data.title}</Text>
        </ListItem>
        {
           (data.content || []).map(value => {
              return (
                <ListItem
                  button
                  onPress={() => this.props.navigation.navigate(value)}
                > 
                  <Text>{value}</Text>
                </ListItem>
              )
           })
        }
      </View>
    }
/>

Hope this will help!