FlatList not rendering data from json array 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.

data={data} should be data={data.data}. Or alternatively you can destructure in the function parameter: function SetList({ data }) (If you don't destructure, it's more conventional to call the argument props. Consistent naming is important to avoid confusion.) — Robin Zigmond
– Robin Zigmond, Commented Feb 14, 2021 at 11:06
make it like this and see what items is if you items is an object you will not see it on phone---like item.reps --- renderItem={(item) => {console.log("item");return( <Text style={styles.name}> {item} </Text>) }} — Abd
– Abd, Commented Feb 14, 2021 at 11:16
Ok i've changed data to props function SetList(props). Then I set data = {data.data}. But it's not returning anything. :( — theabrar
– theabrar, Commented Feb 14, 2021 at 11:16
I can't even do a console.log(item) inside renderItem, which seems to be the issue here. — theabrar
– theabrar, Commented Feb 14, 2021 at 11:23

Abd · Accepted Answer · 2021-02-14 11:31:13Z

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

answered Feb 14, 2021 at 11:31

Abd

5705 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

FlatList not rendering data from json array React-native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related