Rendering items not showing up - react-native

Question

im writing a todolist with reactnative using hooks , however when rendering todo items , its not showing up, any advice to fix this
thank you so much for your help!!!
import React, { useState } from 'react';
import { StyleSheet, FlatList, Text, View } from 'react-native';
export default function App() {
const [todos, setTodos] = useState([
{ text: 'budddy', key: '1' },
{ text: 'helloddd', key: '2' },
{ text: "hellddo", key: '3' }
])
return (
<View style={styles.container} >
<View style={styles.content}>
<FlatList data={todos} renderItem={({ item }) => {
<Text> {item.text}</Text>
}} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
paddingTop: 30,
},
content: {
padding: 40
},
})

Answer 1

Check the renderItem code you need to add return or use the implicit return of arrow function
<FlatList data={todos} renderItem={({ item }) => (
<Text> {item.text}</Text>
)} />

Answer 2

Use the extraData property on your FlatList component.
As per documentation:
Bypassing extraData={this.state} to FlatList we make sure FlatList will re-render itself when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.
here is the example code (documentation)
import React from 'react';
import {
SafeAreaView,
TouchableOpacity,
FlatList,
StyleSheet,
Text,
} from 'react-native';
import Constants from 'expo-constants';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
function Item({ id, title, selected, onSelect }) {
return (
<TouchableOpacity
onPress={() => onSelect(id)}
style={[
styles.item,
{ backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
]}
>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
);
}
export default function App() {
const [selected, setSelected] = React.useState(new Map());
const onSelect = React.useCallback(
id => {
const newSelected = new Map(selected);
newSelected.set(id, !selected.get(id));
setSelected(newSelected);
},
[selected],
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({ item }) => (
<Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}
/>
)}
keyExtractor={item => item.id}
extraData={selected}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});