react error: Error: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children,

I have a react native app. And I try to display some names of array objects.

So this is the simple example:

/* eslint-disable prettier/prettier */

import React, { useContext } from "react";
import { CategoryContext } from "../../../services/category/category.context";
import { CategoryList } from "./category.screen";
import { SafeArea } from "../../../components/utility/safe-area.component";
import { Spacer } from "../../../components/spacer/spacer.component";

import { Text } from "react-native-paper";

const data = [
    {
        name: "roofvogels",
    },
    {
        name: "parkieten",
    },
];

export const SubCategoryScreen = () => {    

    return (
        <SafeArea>
            <CategoryList
                data={data}
                renderItem={({ item }) => {
                    console.log("data", data);
                    return (
                        <>
                            <Spacer position="bottom" size="large">
                                <Text>{data}</Text>
                            </Spacer>
                        </>
                    );
                }}
                keyExtractor={(item) => item.id}
            />
        </SafeArea>
    );
};

categoryList:

export const CategoryList = styled(FlatList).attrs({
    contentContainerStyle: {
        padding: 16,
    },
})``;

and if I do this:

<Text>{data[0].name}</Text>

It returns two times roofvogles.

So I just want to display the two names:

roofvogels
parkieten

But if I try it. Then I get this error:

Error: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.

Question: how to display the two names?

>Solution :

data is an array, which doesn’t directly translate to any meaningful output. You can .map over that array and output the value(s) you want from each object. For example:

<Text>
  {data.map(d => d.name)}
</Text>

Or to put each in its own <Text> element:

<Spacer position="bottom" size="large">
    {data.map(d => <Text>{d.name}</Text>)}
</Spacer>

However you want to organize and style the markup, the point is that you can’t just output an array or an object as-is, but you can loop over that array and/or output specific values from that object.

Edit: At further inspection… You’re already passing data to your <CategoryList> component. And the renderItem function semantically implies that it will already be called for each item in that array. Is that the case? What is item in that callback?

You might be simply looking to render the object from that?:

<Spacer position="bottom" size="large">
    <Text>{item.name}</Text>
</Spacer>

Ultimately anybody here can only guess. It’s up to you to understand and clarify the data structure(s) and component(s) you’re using. The underlying issue remains the same, you can’t directly output an object or array but rather output the values therein. Which value(s) you want to output throughout your UI, that’s up to you.

Leave a Reply