How to pass props from page to layout?

Unanswered

dperolio posted this in #help-forum

2024-01-21T21:38:12.000Z

Let's say I want to pass a prop from a particular page to its corresponding parent layout, for instance, so I can add the current user's ID as a data prop on the <html>, e.g. data-user="234234234342", is there a way to do this?

4 Replies

Siamese Crocodile

2024-01-21T21:47:08.000Z

you can use either Context or URL params

Russian Blue

2024-01-21T21:48:29.000Z

In React, you can pass props from a child component to a parent component by using callback functions. However, this method can lead to what's known as "prop drilling," where you have to pass props through several layers of components. To avoid this, you can use the Context API or a state management library like Redux.

dperolioOP

2024-01-21T21:52:50.000Z

Ah, okay, I was hoping there was a way like Astro, where you could just do like,

<BaseLayout user={user.id}>
  <Heading level={Heading.Levels.ONE}>
    Some Title
  </Heading>
</BaseLayout>

But I guess that's only because the "component" is a part of the page, whereas it's not really in Next. Although, I guess I could still do it that way if I wanted, and just not have a layout.tsx file, I think, but yeah might as well do it the Next way.

@Russian Blue In React, you can pass props from a child component to a parent component by using callback functions. However, this method can lead to what's known as "prop drilling," where you have to pass props through several layers of components. To avoid this, you can use the Context API or a state management library like Redux.

Giant panda

2024-01-21T23:13:59.000Z

Please don't use AI-generated responses, they are frowned upon in our community.