Displaying this response in react native is not working properly

Question

Response is too big to paste here https://prod-public-api.livescore.com/v1/api/app/date/cricket/20230315/5.30?MD=1 is the API

the beautified version is attached below https://codebeautify.org/jsonviewer/y2315b94f

import React, { useState, useEffect } from 'react'
import { TouchableOpacity, View, Text, ScrollView, ActivityIndicator, FlatList, StyleSheet } from 'react-native'
import { Ionicons } from '@expo/vector-icons';
import axios from 'axios';
import { back, container1, loader, head1 } from "../../globals/style";
import { container, result, teams, teams1, status1, league, league2, match, hr100 } from '../../globals/matchStyle'

const LiveScore = ({ navigation }) => {
    var date = (new Date().getDate()).toString();
    var month = (new Date().getMonth() + 1).toString();
    if (month.toString().length < 2)
        month = "0" + month;
    var year = (new Date().getFullYear()).toString();
    currentDate = year + month + date
    // console.log(currentDate)


    const [myData, set_myData] = useState([]);
    const [isLoading, setIsLoading] = useState(true);


    const getScore = async () => {
        console.log("Component Did Mount");
        let axiosConfig = {
            headers: {
                "Content-Type": "application/json"
            },
        };
        try {
            const response = await axios.get(
                `https://prod-public-api.livescore.com/v1/api/app/date/cricket/${currentDate}/5.30?MD=1`,
                axiosConfig
            );
            setIsLoading(false);
            set_myData(response.data.Stages);
            console.log("Live Score :", response.status);

        }
        catch (error) {
            console.log(error);
        }
    }
    useEffect(() => {
        getScore();
    }, []);




    return (
        <View style={container1}>
            {isLoading ? (<View><TouchableOpacity onPress={() => navigation.navigate('WelcomePage')} style={back}>
                <Ionicons name="arrow-back-circle-outline" size={40} color="#9BB1FF" />
            </TouchableOpacity><ActivityIndicator style={loader} size={'large'} color="#5465FF" /></View>)
                : (
                    <>
                        <TouchableOpacity onPress={() => navigation.navigate('WelcomePage')} style={back}>
                            <Ionicons name="arrow-back-circle-outline" size={40} color="#9BB1FF" />
                        </TouchableOpacity>
                        <View style={container} >
                            <Text style={head1} >Live Scores Of Top Events</Text>


                            <FlatList
                                contentContainerStyle={{ paddingBottom: '80%' }}
                                data={myData}
                                renderItem={({ item }) => {
                                    return (
                                        <View style={match}>
                                            <Text style={league} >{item.Snm}</Text>
                                            <Text style={league} >{item.Cnm}</Text>
                                            <Text style={league2} >{item.Events[0].EtTx}</Text>
                                            <Text style={league2} >{item.Events[0].ErnInf}</Text>
                                            <Text style={status1} >{item.Events[0].EpsL}</Text>
                                            <Text style={teams1} >{item.Events[0].T1[0].Nm}</Text>
                                            <Text style={teams1} >{item.Events[0].T2[0].Nm}</Text>
                                            <Text style={result} >{item.Events[0].ECo}</Text>
                                            <Text style={teams} >{item.Events[0].Tr1C1}-
                                                {item.Events[0].Tr1CW1}/
                                                {item.Events[0].Tr1CO1} &
                                                {item.Events[0].Tr1C2}-
                                                {item.Events[0].Tr1CW2}/
                                                {item.Events[0].Tr1CO2}</Text>
                                            <Text style={teams} >{item.Events[0].Tr2C1}-
                                                {item.Events[0].Tr2CW1}/
                                                {item.Events[0].Tr2CO1}
                                                {item.Events[0].Tr2C2}
                                                {item.Events[0].Tr2CW2}
                                                {item.Events[0].Tr2CO2}</Text>
                                        </View>
                                    )
                                }}
                            />
                        </View>
                    </>
                )
            }
        </View>
    )
}


export default LiveScore

This code does display the data but it will only display the First events in stages whereas there are also Events[1] and Events[2] in the response The code is working fine but all the response from api is not shown and only a part of it is shown

Answer 1

Use map to loop over events. Something like this:

<FlatList
  ...
  renderItem={({ item }) => {
    return <>
      <Text>{`Stage: ${item.Sid}`}</Text>
      <View>{
        item.Events.map((event) => <Text>{`Event: ${event.Eid}`}</Text>)
      }</View>
    </>
  }}
/>

See Rendering Multiple Components for details.