Passing state from parent to children in React Nextjs-CodePudding

I am a beginner in React and I am facing an issue to pass a state from parent to children. That's my code :

import Footer from './Footer';
import Header from "./Header";

export default function Layout({setPage, children}) {
    return <>
        <Header setPage={setPage}/>
            {children}
        <Footer/>
    </>
}

At this step, I get the setPage state and I can pass it successfully to the Header component for example. However, {children} don't get it. Is there a way to pass the setPage state to {children} ?

Thanks,

I tried useContext hook but didn't work...

CodePudding user response：

Assuming you are using this Layout component to wrap certain pages content, I don't think you'll need to do this. Follow along:

Probably, you'll use this component as follows:

import { useState } from "React";
import Layout from "../components/Layout";
import OtherComponent from "../components/OtherComponent";

export default function HomePage() {
  const [page, setPage] = useState();

  return (
    <Layout setPage={setPage}>
      <OtherComponent setPage={setPage}/>
    </Layout>
  );
};

Because you'll need to know which children will use that prop. React does have some ways to do this that you asked, but it's discouraged as it fit a super small set of cases.

Keep up learning, good luck!

Edit 1: To complement the usage, you can change what is rendered on the screen using that state like this:

/* previous imports */
import YetOtherComponent from "../components/YetOtherComponent";

export default function HomePage() {
  const [page, setPage] = useState(0); /* setting the default inside the parenthesis */

  return (
    <Layout setPage={setPage}>
      {page === 1 /* checking which component should render */
        ? (<OtherComponent setPage={setPage}/>)
        : page === 2
        ? (<YetOtherComponent setPage={setPage}/>)
        : /* As many options as you want */
      }
      
    </Layout>
  );
};

This way not all of them would display at all times, only when the respective page value is equal to the component that must be shown.

CodePudding user response：

Yes, it is possible to pass the setPage state to {children}. You can use the React Context API to achieve this. With the Context API, you can create a context and pass the setPage state to it. Then you can use the useContext hook in the {children} component to access the setPage state.

CodePudding user response：

There are several ways to achieve the objective. Described below is one rather fundamental / rudimentary method.

Layout component:

import Footer from './Footer';
import Header from "./Header";

export default function Layout({setPage, children}) {
    return <>
        <Header setPage={setPage}/>
            {children}
        <Footer/>
    </>
}

Parent / page where layout component is included:

import Layout from './Layout';

export default function SomePage(props) {
  const [page, setPage] = useState();
  return <>
    <Layout setPage={setPage}>
      <SomeChild1 setPage={setPage} />
      <SomeChild2 setPage={setPage} />
      <SomeOtherChild />
    </Layout>
  </>
}

In this way, the setPage method is passed to each child where it is required. SomeChild1 and SomeChild2 both have the setPage sent as prop. Whereas SomeOtherChild does not require the prop and therefore does not have it.