Getting error while putting an array onto state - React

Question

I'm receieving an array from a Express back-end running with a MongoDB and am currently retrieving an array with the .toArray() function, everything's fine on the back-end.

So the issue is when I'm receieving the array on the front-end, I'm trying to pass it onto state with setState function and it gives me this error

Error: Objects are not valid as a React child (found: object with keys {_id, uploaderId, uploaderName, title, subtitle, description, language, category, subcategory, currency, price, contents, likes, dislikes, coverImage, coverVideo}). If you meant to render a collection of children, use an array instead.

Here's an image of the object structure (the courses property is the one that has the retrieved array from the back-end)

And the actual code is looking like this

axios({
                url: "/course/data",
                method: "GET",
                params: {id: userInfo._id},
            }).then(response => {
                userInfo.courses = response.data;
                console.log(userInfo);
                this.setState(userInfo);
            }).catch(err => err ? alert(err) : null);

The error message is telling you what's wrong! Your react component should return valid HTML markup, or null. What is aforementioned component returning ? — Frosty619
– Frosty619, Commented Jun 9, 2020 at 1:02
Oh thank you, I didn't notice it, but I had {this.state.courses} somewhere in the code which I forgot to remove. I removed it and it's fine now! Thank you really much @Frosty619 — Селятин Исмет
– Селятин Исмет, Commented Jun 9, 2020 at 1:07
Happy to help! You may upvote the comment to show your appreciation :D — Frosty619
– Frosty619, Commented Jun 9, 2020 at 1:26
I didn't even know you could upvote comments till now. Thanks again! — Селятин Исмет
– Селятин Исмет, Commented Jun 9, 2020 at 1:57

Селятин Исмет · Accepted Answer · 2020-06-09 01:08:29Z

1

I had a {this.state.courses} tucked up somewhere in my Code, where it should've been {this.state.courses.length}, therefore removing it fixed the issue just like @Frosty619 said.

answered Jun 9, 2020 at 1:08

Селятин Исмет

1971 gold badge1 silver badge10 bronze badges

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

Comments

Buwaneka Sumanasekara · Accepted Answer · 2020-06-09 01:40:39Z

0

Try with this,

axios({
    url: "/course/data",
    method: "GET",
    params: {id: userInfo._id},
}).then(response => {
     userInfo["courses"] = response.data.courses;
     this.setState({userInfo:userInfo});


}).catch(err => err ? alert(err) : null);

answered Jun 9, 2020 at 1:40

Buwaneka Sumanasekara

6632 gold badges9 silver badges26 bronze badges

Collectives™ on Stack Overflow

Getting error while putting an array onto state - React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related