React Native Text Component not rendered - reactjs

Question

I am a newbie in react native. I tried to create a to-do app, simple enough. But I have no idea why the text in the created to-do item not rendered
import React, { useState } from 'react';
import {
StyleSheet,
Text,
View,
Button,
TextInput,
FlatList,
Dimensions
} from 'react-native';
export default function App() {
const [task, setTaskText] = useState('')
const [tasks, setTasks] = useState([])
const addTask = () => {
setTasks([...tasks, { key: Math.random().toString(), text: task}])
}
return (
<View style={styles.container}>
<View style={styles.form}>
<TextInput
onChangeText={setTaskText}
value={task}
placeholder="Type a task..."
style={styles.input}
multiline
/>
<Button title="Add Task" style={styles.button} onPress={addTask} />
</View>
<FlatList
style={styles.itemContainer}
data={tasks}
renderItem={itemData => (
<View style={styles.taskItem}>
<Text style={styles.taskText}>{itemData.text}</Text><Button title="Complete" />
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 32,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
form: {
// flex: 1,
flexDirection: 'row',
padding: 32,
justifyContent: 'space-between',
},
button: {
fontSize: 32,
padding: 5
},
tasks: {
flex: 1,
alignContent: 'flex-start',
},
input: {
flex: 1,
fontSize: 22,
},
itemContainer: {
flex: 1,
width: Dimensions.get('window').width,
padding: 20,
borderColor: 'red',
borderWidth: 1
},
taskItem: {
padding: 10,
borderColor: 'black',
borderWidth: 1,
backgroundColor: '#efefef',
marginBottom: 10,
alignContent: 'center',
justifyContent: 'center',
flexDirection: 'row'
},
taskText: {
flex: 1,
fontSize: 24,
borderColor: 'yellow',
borderWidth: 1,
color: 'black',
textAlign: 'left'
}
});
So I tried to use a flat list and gave some border color to pin point the component rendered. I could see that the text component was rendered but there is no content
Can anyone help? What went wrong?

Answer 1

Your implementation was wrong.
It should be renderItem({item, index, separators})
And for each of the item you should consume it like item.text
<FlatList
style={styles.itemContainer}
data={tasks}
renderItem={ ({item}) => (
<View style={styles.taskItem}>
<Text style={styles.taskText}>{item.text}</Text><Button title="Complete" />
</View>
)}
/>