2

I've already asked a question in which I had the problem that I didn't know how I can create my own layouts for them with a list of objects (similar to data.map) in Next.js. (React / NextJS define Elements ni map)

I was then told a solution: (https://codesandbox.io/s/funny-visvesvaraya-m5cw7?file=/src/App.js)

Unfortunately, I now always get an error:

Unhandled Runtime Error

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

I'll link the Git repository and the code snippet below.

Code snippet: https://github.com/Thomas-Blakeney/ArisCorp-Homepage-Frontend/blob/master/src/components/CommLinksSection.jsx

Repo: https://github.com/Thomas-Blakeney/ArisCorp-Homepage-Frontend

Improve this question

1 Answer 1

Reset to default
1

As the error says, it's caused by rendering an object directly. The object in question is here:

<span className="font-normal text-primary">{channel}</span>
                                            ^
                                            channel is an object

This code is present in each OneThird, TwoThirds, and ThreeThirds components.

Looking at the channel object it makes sense to render only its channel property, so you can change the code to:

<span className="font-normal text-primary">{channel.channel}</span>

It will show up like this (the red outline is mine):

screenshot

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

1 Comment

Thank you so much, everything works perfectly, I couldn't have done it without you! :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.