CODEWITHSUNDEEP
reactjsroutesnext.js
p_waves
p_waves

Reputation: 401

Next JS, React have child component tell parent what to render

I am new to NextJS and React and want to create some dynamic routing. I have a parent page that is calling a child component which show some navigation.

In my parent component I have a layout that includes a header and right sidebar which will show on each page, but depending on the link that is clicked in my Nav component the body content will change.

My parent component:

import React from 'react';

import { Header } from './Header;
import { SubNav } from './SubNav;
import { Sidebar } from './Sidebar;

export const AboutPage = () => {
  return (
    <>
      <Header />
      <SubNav />

      <div className="content">
        >>>I want to do something like this <<<
        {section === history && <History />}
        {section === contact && <Contact />}
          .....
      </div>

      <Sidebar />
    </>
  );
};

In my child Nav component I am mapping through some data that includes a 'value' for each different section that I have defined in an array.

<NavButtons
  onClick={() => {
    const path = AppRoute.ABOUT.replace(':section', 'value');
    router.push(path, path, { shallow: true });
  }}
/>

The page routes correctly with the value of the section changing each time I click on a different Navigation button but I can't get the content to change in the parent component, I have tried creating a function in the parent that will get the value from the child so that I can use it to define the sections in the parent, but it ends up creating an infinite loop. Confused on how to get the two to work together.

Upvotes: 1

Views: 3443

Answers (2)

Vibhav
Vibhav

Reputation: 321

        import React from 'react';
        import {useState} from 'react';
        import { Header } from './Header';
        import { SubNav } from './SubNav';
        import { Sidebar } from './Sidebar';
        
        export const AboutPage = () => {
            const [section,setSection] = useState()
            sectionHandler = (section) => {
             setSection(section)
            }
          return (
            <>
              <Header />
              <SubNav />
        
              <div className="content">
                >>>I want to do something like this <<<
                {section === history && <History />}
                {section === contact && <Contact />}
                  .....
              </div>
        
              <Sidebar />
            </>
          );
        };

and in your child comp

     <NavButtons
      onClick={() => {
        const path = AppRoute.ABOUT.replace(':section', 'value');
        props.sectionHandler(section)
        router.push(path, path, { shallow: true });
      }}
     />

don't forget to pass sectionhandler from parent to child comp

Upvotes: 1

tobzilla90
tobzilla90

Reputation: 657

You can detect the pathname with the useRouter Hook. Then you can check in a switch case statement which site the user is on and render the components for the route.

import { useRouter } from next/router

Inside the component

const router = useRouter();

The function to return the component

function renderSidebar(pathname){
switch(pathname){
...
}

Inside the render function

{ renderSidebar(router.pathname) }

See further usage in the NextJS docs https://nextjs.org/docs/api-reference/next/router

Upvotes: 1

Related Questions