Describe the issue:
Not sure if the right place to ask but I will try anyway. I have a different behaviour in two of my projects with structure text React component when passing renderLinkToRecord
. Both projects use the same code:
<StructuredText
data={data.content}
renderLinkToRecord={({ record, children }) => <RenderLinkToRecord record={record} children={children} />}
/>
And the same RenderLinkToRecord
component:
export const RenderLinkToRecord = ({ record, children }) => {
return (
<NextLink href={`${record.slug}`} title={record.title}>
{children}
</NextLink>
);
}
Both projects receive the same children
data into the RenderLinkToRecord
component:
Project 1
[
{
'$$typeof': Symbol(react.element),
type: Symbol(react.fragment),
key: 't-0',
ref: null,
props: { children: [Array] },
_owner: null,
_store: {}
}
]
Project 2
[
{
'$$typeof': Symbol(react.element),
type: Symbol(react.fragment),
key: 't-0',
ref: null,
props: { children: [Array] },
_owner: null,
_store: {}
}
]
But in the project 1 I receive “Error: Multiple children were passed to with href
of sirius
but only one child is supported Multiple children were passed to `<Link>` | Next.js”, while in the project two this works as expected!
I am busting my head regarding this for the couple of hours, but I just don’t see what would be different. The only thing I see different is that project one is using Nextjs ^13.4.19
and project 2 is using ^13.4.12
. But this should not have any influence, am I right?
Anyone sees what could be the problem here?
Kind regards,
Primoz