React make component more reusable

Question

I create a Header and styles for my project and every page will share these components.

The structure is:

<MuiThemeProvider theme={theme}>
    <div className="app-horizontal collapsed-sidebar">
        {/* SideBar Here */}
        <div className="app-container">
            <div className="rct-page-wrapper">
                <div className="rct-app-content">
                    <Header />
                </div>
                <div className="rct-page">
                    <HorizontalMenu />
                    <Scrollbars
                        className="rct-scroll"
                        autoHide
                        autoHideDuration={100}
                        style={getScrollBarStyle()}
                    >
                        <Content />
                    </Scrollbars>
                </div>
            </div>
        </div>
    </div>
</MuiThemeProvider>

Basically I have:

Header folder with header components inside. Home folder with has Home.js the code abode and Content.js where I render the Home content inside of <div className="rct-page"> in the <Content />.
Users folder the same as Home, but changing the <Content /> to the User's content.
Properties folder the same as Home, but changing the <Content /> to the Properties` content
And so on.

As you can see, for every page that my project navigate to, I'm repeating the same structure of the code above, but changing the <Content />. I believe it not a good approach. Is there a way to make my code more reusable?

Thanks

Take a look at the React docs on [composition](https://reactjs.org/docs/composition-vs-inheritance.html) and [this thread](https://stackoverflow.com/questions/49706823/what-is-this-props-children-and-when-you-should-use-it). You can replace `` with `props.children`, and wrap the header component around whatever other components you would like it to contain. — lawrence-witt, May 25 '21 at 21:20
@lawrence-witt Thank you. Could you please give me an example? All my components are in Navigation.js where I manage the routers such as ``````. How would I wrap the header inside the User component? — myTest532 myTest532, May 25 '21 at 21:23
It seems you've coupled your header component and layout to your page components and layouts. I would strongly suggest decoupling the header from the page contents as this would allow you to render the header via your router on all the routes you want it on and the pages can be matched independently. — Drew Reese, May 25 '21 at 21:44

score 3 · Accepted Answer · answered May 25 '21 at 21:44

I misread your example code and thought it was the header component itself. Actually, what you probably need is just to change the location of your switch.

If the sample you shared is genuinely the same for every single page of your application, then it is really better to think of it as the application root:

<MuiThemeProvider theme={theme}>
    <div className="app-horizontal collapsed-sidebar">
        {/* SideBar Here */}
        <div className="app-container">
            <div className="rct-page-wrapper">
                <div className="rct-app-content">
                    <Header />
                </div>
                <div className="rct-page">
                    <HorizontalMenu />
                    <Scrollbars
                        className="rct-scroll"
                        autoHide
                        autoHideDuration={100}
                        style={getScrollBarStyle()}
                    >
                        <Switch>
                          <Route exact path="/" component={HomeContent}/>
                          <Route exact path="/users" component={UsersContent}/>
                          ...
                        </Switch>
                    </Scrollbars>
                </div>
            </div>
        </div>
    </div>
</MuiThemeProvider>

I don't know what Navigation.js does in your original code. If it is a component with side-effects or other behaviours you don't want polluting the root component, you could just put it in place of the switch above.

Thank you. Your first answer was perfect. I moved all the ```MuiThemeProvider``` to a Main.js component with ```{props.children}``` instead of ``````. Then I call it in the other components as ```
EXAMPLE
``` — myTest532 myTest532, May 25 '21 at 21:49

React make component more reusable

1 Answers1

EXAMPLE