FlatList 不呈现来自 json 数组 React-native 的数据

Question

I have a FlatList in React Native -

Here's my object that I'm passing on to FlatList.

    const [workoutSet, setWorkoutSet] = useState([
        { setNum: 1, reps: 10, weight: 0 },
        { setNum: 2, reps: 10, weight: 0 },
    ]);

    <SetList data={workoutSet} />

Within SetList I'm trying to render the data passed on to here.

export default function SetList(data) {
    return (
        <>
            <FlatList
                data={data}
                renderItem={(item) => {
                    <Text style={styles.name}> {item} </Text>;
                }}
            />
            {console.log(data.data[0].reps)}
        </>
    );
}

console.log(data.data[0].reps ) returns 10, as expected.

However, if I do a console.log inside renderItem, it doesn't print anything. I'd like to access setNum, reps and weight inside renderItem so that I can display a list. What am I doing wrong? I've searched StackOverflow and couldn't find an answer to this. Thanks.

Answer 1

Working example items in your render is an object thats why it is not showing text component don't show object as text i recommend reading about flatlist to understand more about it -key extractors -layouts

like best practices since it can be a problem for large lists (very slow performance for 100 rows)

working example https://snack.expo.io/LpItecGOc