CODEWITHSUNDEEP
javascriptjsonreactjsreact-nativereact-native-flatlist
theabrar
theabrar

Reputation: 450

FlatList not rendering data from json array React-native

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.

Upvotes: 0

Views: 630

Answers (1)

Abd
Abd

Reputation: 568

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

Upvotes: 1

Related Questions