Trying to add an array of objects using react useState but getting the error 'Objects are not valid as a React child (found: object with keys {})'

Question

I'm trying to add an array of objects using React useState but I keep getting the error

Objects are not valid as a React child (found: object with keys {})

This is my code in app.js Note: response.data is getting logged in the console, it's type is an object

const [users, setUsers] = useState([])

useEffect(() => {
    Axios.get("http://localhost:3001/").then((response) => {
        setUsers([...users, response.data])
    }).catch((err) => console.log(err))
}, [])

This is the get api

app.get("/", (req, res) => {
    userModel.find({}, (err, result) => {
        if(!err) {
            res.json(result) //sends 'result' to front end
        } else {
            res.json(err)
        }})
})

The data (result) is being sent to the front end

This is the data I want to add

[{
    name: 'John',
    age: 20
},
    name: 'Doe',
    age: 23
}]

Edit: Simple arrays like [0,1,2] are getting added to users, arrays that contain objects arent being added

Edit 2: This is my whole function:

export default function App() {

    const [users, setUsers] = useState([])

    useEffect(() => {
        Axios.get("http://localhost:3001/").then((response) => {
            setUsers([...users, response.data])
        }).catch((err) => console.log(err))
    }, [])

    return(
        <>
            {users.map((user) => {
                return(
                    <div>
                        <h1>{user}</h1>
                    </div>
                )
            })}
        </>
    )
}

Can you please share the react component part where you use users state ? — Kavindu Vindika
– Kavindu Vindika, Commented Apr 17, 2022 at 15:16
setUsers([...users, ...response.data]) caused the same error — Curran-C
– Curran-C, Commented Apr 17, 2022 at 15:20
This looks okay to me. I don't think the error is coming from this component — Rafsanjani
– Rafsanjani, Commented Apr 17, 2022 at 15:22
This is the only component, all this app does is get data from the nodejs backend and display it in an h1 tag — Curran-C
– Curran-C, Commented Apr 17, 2022 at 15:25

Kavindu Vindika · Accepted Answer · 2022-04-17 15:25:13Z

1

You have to append the response.data as follows as @Thinker mentioned in the comment section.

useEffect(() => {
  Axios.get("http://localhost:3001/")
    .then((response) => {
      setUsers([...users, ...response.data]);
    })
    .catch((err) => console.log(err));
}, []);

And then you have to insert it in JSX properly. Currently you're directly giving an object inside <h1>{user}</h1> (It's a violation of JSX syntax). So correct it as follows to include user data correctly. (You can modify it as your preference)

                    <div>
                        <h1>{user.name}</h1>
                        <h1>{user.age}</h1>
                    </div>

answered Apr 17, 2022 at 15:25

Kavindu Vindika

2,7972 gold badges16 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Trying to add an array of objects using react useState but getting the error 'Objects are not valid as a React child (found: object with keys {})'

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