Pass props from page to layout

Unanswered

Cape horse mackerel posted this in #help-forum

Cape horse mackerelOP

2024-02-06T02:39:48.000Z

Hi team, currently I am trying to pass props (params) from page to layout but it is undefined , how can you pass props to next page

36 Replies

@Cape horse mackerel Hi team, currently I am trying to pass props (params) from page to layout but it is undefined , how can you pass props to next page

Masai Lion

2024-02-06T02:44:50.000Z

Can you share code ?

Cape horse mackerelOP

2024-02-06T03:09:37.000Z

@Cape horse mackerel Click to see attachment

Masai Lion

2024-02-06T03:10:29.000Z

Are those different files right?

Cape horse mackerelOP

2024-02-06T03:11:00.000Z

that's right ,

Masai Lion

2024-02-06T03:11:26.000Z

ContentLayout is which script?

Details/page.tsx?

Cape horse mackerelOP

2024-02-06T03:11:39.000Z

in file layout.tsx

I want init props for displaying title in confirm page

but currently, it just can pass children from file page.tsx

Masai Lion

2024-02-06T03:16:25.000Z

Okay so

On your confirm/page.tsx Change it to this:

const ConfirmationPage: NextPage = ({ params }) => {
  return <RegistrationConfirmation title={params.title} />;
};

export default ConfirmationPage;

And then

Create a new document inside where this all are

Call it _app.tsx

Wait @Cape horse mackerel you already have a file called app.tsx or sum?

For this you must handle layout from a file called app.tsx

Cape horse mackerelOP

2024-02-06T03:23:33.000Z

yah, I just have layout.tsx, not-found,..., I'm trying to avoid using app.tsx, but it's okay if it's necessary to implement.
thank you

@Cape horse mackerel yah, I just have layout.tsx, not-found,..., I'm trying to avoid using app.tsx, but it's okay if it's necessary to implement. thank you

Masai Lion

2024-02-06T03:26:04.000Z

In that case

You can do this on your layout.tsx

export default function ContentLayout({ children, params }) {
  // Your layout logic here
}

This on layout.tsx

And then

On your confirm/page.tsx

import ContentLayout from '/layout.tsx';

const ConfirmationPage = ({ params }) => {
  return <ContentLayout params={params}>{/* Your page content here */}</ContentLayout>;
};

export async function getServerSideProps() {
  // Fetch your data and return it as props
  const params = {
    title: 'Your Title',
  };

  return {
    props: {
      params,
    },
  };
}

export default ConfirmationPage;