React Native FlatList not showing

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;

Answer

try

const [kids, setKids] = useState([..blah blah blah..])

 <FlatList
    data={kids}
    renderItem={({item}) => (
      <View>
        <Text>{item.name}</Text>
      </View>
    )}
    keyExtractor={(item, idx) => item.key}
  />

Advertisement

Answer