Getting undefined is not an object when using react-native's FlatList-CodePudding

We need your help. Recently began to study react-native. Now I try to display an array of objects on the page. I did everything as if right, but I get an error:

Undefined is not an object (evaluating 'task.name'

I have two questions, what am I doing wrong and why in react-native, elements are displayed using FlatList and not via the map method? Thank you very much

import React, {useState} from "react";
import {FlatList, StyleSheet, Text, View} from "react-native";

export default function Tasks() {

const [tasks, setTasks] = useState([
    {id: 1, name: "By Bread"},
    {id: 2, name: "By pizza"},
    {id: 3, name: "By snack"}
])

return (<View>
    <FlatList data={tasks} renderItem={({task}) => (
        <Text key={id}>{task.name}</Text>
    )}/>
        </View>)
}

const styles = StyleSheet.create({})

CodePudding user response：

You have a key = {id} in your Text, and there is no id defined at this point. And you are missing the keyExtractor of FlatList. Also in your renderItem, use item instead of task.

Try with this :

import React, {useState} from "react";
import {FlatList, StyleSheet, Text, View} from "react-native";

export default function Tasks() {

const [tasks, setTasks] = useState([
    {id: 1, name: "By Bread"},
    {id: 2, name: "By pizza"},
    {id: 3, name: "By snack"}
])

return (
    <View>
      <FlatList data={tasks} 
        renderItem={({item}) => (<Text keyExtractor={item => item.id}>{item.name}</Text>)}
      />
    </View>
    )
}

const styles = StyleSheet.create({})