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? Here is my code snippet:
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({})
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({})