Can I have multiple {childern} in my layout file?
Unanswered
WhyFencePost (Ping Reply) posted this in #help-forum
I want to do smtn were I have a different html setup based on mobile or desktop, and to do this I want use the md: from tailwind, and I therefore want to do multiple different grids, and i need to know if I can have multiple {children} tags as long as only one is visible
16 Replies
no, i need to render the same child twice
just the basic child
as one is visible on mobile, and the other on desktop
...no you cant have multiple children
@WhyFencePost (Ping Reply) no, i need to render the same child twice
just render the component twice
if you want to render like a page component..twice, not possible. Also this thing itself is unusual, can you explain why you need to do this
i have a grid based layout, and a part of that is the nav, which is renderd in layout. I need to render a difrent grid on mobile than on desktop, and each needs a page as a child, using {children}. Therefore only one will ever be seen, but both need a child of page to show
well you cant render pages multiple times, so yea, cant you just use css to update the ui accordingly?
ill try???
@WhyFencePost (Ping Reply) no, i need to render the same child twice
function Layout({ children }) {
return (
<div>
{children}
{children}
</div>
);
}@Arinji if you want to render like a page component..twice, not possible. Also this thing itself is unusual, can you explain why you need to do this
why would it be impossible? it's just a react prop. it's certainly unusual and there is almost certainly a better way, but it's not impossible.
Pretty sure, need to check again ig :/
Blue orchard bee
Here's a Stackblitz example, double rendering children shouldn't be problematic.
https://stackblitz.com/edit/next-js-app-router-double-children?file=app%2Flayout.tsx
https://stackblitz.com/edit/next-js-app-router-double-children?file=app%2Flayout.tsx
thanks guys