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:
import React, {useState} from 'react';
import { FlatList, SafeAreaView, StyleSheet, Text, View } from 'react-native';
function ClassList(props) {
const kids = useState([
{ name: 'John', grade: '100', key: '1' },
{ name: 'Jimmy', grade: '90', key: '2' },
{ name: 'Jackson', grade: '80', key: '3' },
]);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={kids}
renderItem={({kid}) => (
<View>
<Text>{kid.name}</Text>
</View>
)}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: '#a0a0a0',
},
});
export default ClassList;
CodePudding user response:
try
const [kids, setKids] = useState([..blah blah blah..])
<FlatList
data={kids}
renderItem={({item}) => (
<View>
<Text>{item.name}</Text>
</View>
)}
keyExtractor={(item, idx) => item.key}
/>