How can i use the same design with different data different pages in reactjs-CodePudding

I have a component called home pages where navbar i using i like use this same navber with my another component called shop.js with different data

This is the home component

const Home = () => {
    return (
        <React.Fragment>
            <Header/>
        </React.Fragment>
    );
};

This is the header component

const Header = () => {
    return (
        <header>
            <TopModal/>
            <Navbar/>
            <HeroSlider/>
        </header>
    );
};

This is the Shop.js components

export default function Shop() {
    return (
        <React.Fragment>
            {/*this component coming from home component*/}
            <Header/>
        </React.Fragment>
    )
}

I want to change the navbar value in shop.js?

CodePudding user response：

make a separate component of the navbar and add the navbar component in the app.js file which will add the navbar to all files or add the navbar component to other component files in which you want the navbar and use props to change the button or data of the navbar

CodePudding user response：

You can use the children property of the Header component to pass your own components:

const Header = ({children}) => {
    let navbar = Navbar
    if (children.length) {
       navbar = children[0]
    }
    return (
        <header>
            <TopModal/>
            {navbar}
            <HeroSlider/>
        </header>
    );
};

Your Home component will be the same, while your Shop instead:

export default function Shop() {
    return (
        <React.Fragment>
            <Header>
                <ShopNavbar/>
            </Header>
        </React.Fragment>
    )
}