I am trying to fetch json api data from https://mocki.io/v1/d479a871-9165-45a1-a43d-cd2ae3e68845
its a complex json object with parent and child classes. I think sectionlist is the most fit component to display the data but any other most apropriate component if there is accepted since I am still new to react native. I have tried the following answer but seems far much to answer my question Cannot read property 'length' of undefined when using SectionList Here is my code`
import * as React from 'react';
import { Button, View ,Pressable,Text,StyleSheet,ActivityIndicator,FlatList,SectionList} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Component } from 'react/cjs/react.production.min';
const Drawer = createDrawerNavigator();
const Stack=createStackNavigator();
export default class ScreenA extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: true
};
}
async getData() {
try {
const response = await fetch('https://mocki.io/v1/d479a871-9165-45a1-a43d-cd2ae3e68845');
const json = await response.json();
this.setState({ data: json });
} catch (error) {
console.log(error);
} finally {
this.setState({ isLoading: false });
}
}
componentDidMount() {
this.getData();
}
render() {
const { data, isLoading } = this.state;
return (
<View style={{ flex: 1, padding: 24 }}>
{isLoading ? <ActivityIndicator/> : (
<View >
<SectionList
sections={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item, index) => index}
renderSectionHeader={({ section: { item.firstName } }) => (
<Text >{item.loanAmount}</Text>
)}
/>
</View>
)}
</View>
);
}
};
`
any help will be Highly appreciated. Thanks in advance