How to parse a JSON Response in React-Native - json

Question

I have a JSON response from Django REST API like this:
[
{"email": "email1#gmail.com", "fullname": "fn1", "id": 1},
{"email": "email2#gmail.com", "fullname": "fn2", "id": 2},
{"email": "email3#gmail.com", "fullname": "fn3", "id": 3},
{"email": "email4#gmail.com", "fullname": "fn4", "id": 4},
{"email": "email5#gmail.com", "fullname": "fn5", "id": 5}
]
And I want to parse it in React native I used this code but it doesn't function for me I don't know why!
I'm a little bit new to this framework
import React , { useEffect, useState } from 'react';
import { View, ScrollView, Text,ActivityIndicator } from 'react-native';
const Information: () => React$Node = () => {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
useEffect(() => {
fetch('http://192.168.1.18:8000/api/User')
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);
return (
<>
<ScrollView>
<View>
{isLoading ? <ActivityIndicator/> : (
<View
data={data}
renderItem={({ item }) => (
<Text >{item.id},{item.email},{item.fullname}</Text>
)}
/>
)}
</View>
</ScrollView>
</>
);
};
export default Information;

Answer 1

Here you have an example of FlatList:
return (
<SafeAreaView>
<FlatList
data={data}
renderItem={({ item }) => <Text>{item.email} ... and other stuff</Text>}
keyExtractor={item => item.id}
/>
</SafeAreaView>
)