React Native Flatlist - How to loop through nested object

Question

I have a file called ./jsonData.json which returns a JSON object. Inside this file, I have the whole data 

import QuizData from './quizData.json'

You can see the data

[

    {

        "id": 1,

        "name": "Lesson 1",

        "topics": [

            {

                "topicID": 1,

                "topicName": "Science",

                "topicDescription": "Science quiz questions"

            },

            {

                "topicID": 2,

                "topicName": "General Knowledge",

                "topicDescription": "General Knowledge Quiz Questions"

            }

        ]

    }

]

What I am trying to do with this data is, I am getting the topic name from the dataset and put that out as a text. To do this I have used the code as below:

<FlatList

    data={QuizData}

    renderItem={({ item, index }) =>

        <View>

            <Text>{item.topics.topicName}</Text>

        </View>

    }

    keyExtractor={(item) => item.topicID.toString()}

/>

I am getting an error so I have tried using 

{item.topics.[index].topicName}

and

{item.topics[index][topicName]}

But still, I am getting an error:

undefined is not an object.

So I change the 

data={QuizData.topics}

To

{item.topicName}

Now I have no error. But I am not even getting the output as expected. Can anyone tell me how to solve it?

Answer 1

Your code is correct, I have just done minute changes to the code.

and tried it. It achieved the desired output as required. Go through the code below:

import * as React from 'react';

import { Text, View, FlatList } from 'react-native';

import data from './data.json';

export default function App() {

  return (

    <FlatList

      data={data}

      renderItem={({ item, index }) => (

        <View>

          {item.topics.map((v, i) => (

            <>

              <Text>{v.topicName}</Text>

              <Text>{v.topicDescription}</Text>

            </>

          ))}

        </View>

      )}

    />

  );

}

If you are a beginner and want to know more about Data Science the do check out the Data Science course