Whenever I try to show a list of kids, it throws a fit and doesn’t do anything. Is there something wrong with my json or is it the way I rendered the list?
my file:
JavaScript
x
36
36
1
import React, {useState} from 'react';
2
import { FlatList, SafeAreaView, StyleSheet, Text, View } from 'react-native';
3
4
function ClassList(props) {
5
const kids = useState([
6
{ name: 'John', grade: '100', key: '1' },
7
{ name: 'Jimmy', grade: '90', key: '2' },
8
{ name: 'Jackson', grade: '80', key: '3' },
9
]);
10
11
12
return (
13
<SafeAreaView style={styles.container}>
14
<FlatList
15
data={kids}
16
renderItem={({kid}) => (
17
<View>
18
<Text>{kid.name}</Text>
19
</View>
20
)}
21
/>
22
</SafeAreaView>
23
);
24
}
25
26
const styles = StyleSheet.create({
27
container: {
28
flex: 1,
29
justifyContent: "center",
30
alignItems: "center",
31
backgroundColor: '#a0a0a0',
32
},
33
});
34
35
export default ClassList;
36
Advertisement
Answer
try
JavaScript
1
12
12
1
const [kids, setKids] = useState([..blah blah blah..])
2
3
<FlatList
4
data={kids}
5
renderItem={({item}) => (
6
<View>
7
<Text>{item.name}</Text>
8
</View>
9
)}
10
keyExtractor={(item, idx) => item.key}
11
/>
12