How do you pass props to the the page.jsx of layout? (NEXT 13)
//app/blog/layout.jsx
export default function RootLayout({ children }) {
return (
<div>
<Navbar />
<Sidebar />
{/*How do I pass any props from this root layout to this {children} that Im getting from page.jsx*/}
{children}
</div>
);
}
Basically, How do you pass a prop to a function prop (Next. JS 13)?
According to the next13 docs you cannot:
It's not possible to pass data between a parent layout and its children. However, you can fetch the same data in a route more than once, and React will automatically dedupe the requests without affecting performance.
Because the layout component refers to a component that defines the overall structure and arrangement of other components within an application or a specific section of the UI. it is not designed to implement state management. its whole purpose is to reduce the time to first render to increase the user experience
But I found a way. In Rootlayout, console.log(props)
export default function RootLayout(props) {
console.log("props in layout",props)
return (
<div>
{props.children}
</div>
);}
this is what you will see
props in layout {
children: {
'$$typeof': Symbol(react.element),
type: {
'$$typeof': Symbol(react.module.reference),
filepath: '/home/tesla//node_modules/next/dist/client/components/layout-router.js',
name: '',
async: false
},
key: null,
ref: null,
props: {
parallelRouterKey: 'children',
segmentPath: [Array],
error: undefined,
errorStyles: undefined,
loading: undefined,
loadingStyles: undefined,
hasLoading: false,
template: [Object],
templateStyles: undefined,
notFound: [Object],
notFoundStyles: undefined,
childProp: [Object],
rootLayoutIncluded: true
},
_owner: null,
_store: {}
},
// THIS IS HOW WE PASS PROPS
params: {}
}
Many properties are not extensible but params. we can dynamically add properties to this object. for example
props.params.newProp = "testing";
Now visit page.js and
const Page = (props) => {
console.log("props in page", props);
return ()}
you will see that props is added to the params object
No matter what I tried, page.tsx had only two props: params and searchParams. searchParams is automatically populated if you have query parameters on url. So, I think params are the only way to pass props from the root layout. you can pass functions too
To pass props from your Layout component(RootLayout for you case) to page.jsx.
//app/blog/layout.jsx
export interface items {
foo: string;
bar: string;
}
export default function RootLayout({
children,
params,
}: {
children: React.ReactNode;
params: {
foo: string;
items: items;
age: number;
};
}) {
params.foo = "bar"; //string example
params.items = { foo: "bar", bar: "foo" }; //object example
params.age= 1; //number example
return (
<html lang="en" className="">
<body>{children}</body>
</html>
);
}
//app/blog/page.jsx
export default function Dashboard({
params,
}: {
params: { foo: string; items: items; age: number };
}) {
console.log(params.foo); //bar
console.log(params.items); //{foo: 'bar', bar: 'foo'}
console.log(params.age); //1
return (
<div></div>
);
}
You can just utilize React Context:
// layout.tsx
import React from 'react';
export const PageContext = React.createContext(null);
export default function SomeLayout({children}) {
const [search, setSearch] = React.useState('foo');
return <PageContext.Provider value={search}>{children}</PageContext.Provider>
}
// page.tsx
import React from 'react';
import PageContext from '../layout.tsx';
export default function SomePage() {
const search = React.useContext(PageContext);
console.log(search);
return null;
}
In case if you want to send this props of children to Navbar component
<Navbar children = {children} />
