NextJS Runtime: "objects are not valid" in a for-loop

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

Solution 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):