How to handle 2 Header in reactJS?

Question

I need to handle 2 different header in my application:

Menu
A simple Bar with title

Firstly I’m thinking by using the local storage to save the menu I want to showUp (localStorage.setItem('menu', 'default’);) So when I’m in a component who don’t need the menu but just the simple bar I just resetting the localStorage like this : localStorage.setItem('menu', ‘bar’);

But this idea (I know it's not the best) didn’t re-render my header.   What should I do to handle this case ?

In my render I have something like this :

render() {
        let menu = localStorage.getItem('menu');
        return (
            <header>
                {menu === 'bar' ? <TopBar/> : <MenuBar/>}
            </header>
        )
    }

@Samamone can you please check my answer? If you have any questions or feedback, please feel to write. — Jordan Enev
– Jordan Enev, Commented Jun 20, 2019 at 17:12
@JordanEnev Hey, sorry I moved on to something else this week, I'll be back to you next week. I think I'll try second suggestion, which I think is the most appropriate for my case. I will share my code when it works, otherwise I'll tell you.. But I think you put me on the right track :) — Samamone
– Samamone, Commented Jun 21, 2019 at 15:35

Jordan Enev · Accepted Answer · 2019-06-13 15:14:24Z

Your Header isn't rerendered, because its props / state aren't changed. You're changing only the localStorage and this won't rerender your component.

I can suggest to you two approaches:

1. Depending on which route you are, just use the proper Header:

// Home.js
const Home = props => <>
  <MenuBar />
  // The rest components of your page
</>


// Inside.js
const Inside = props => <>
  <TopBar />
  // The rest components of your page
</>

2. If you have a <PageLayout /> component, you can use a prop for conditionally render the Header:

<PageLayout /> is such a component, where we can reuse the page layout components composition. Every page has a header, body, footer. Instead of duplicating the same components structure in all the pages, it will be better to abstract the layout structure in <PageLayout />.

const PageLayout = ({ header === 'default', children }) => <>
 <header>
   { header === 'bar' ? <TopBar /> : <MenuBar /> }
 </header>
 <body>
   {children}
 </body>
 <Footer />
</>

// Home.js - Here will use the `default` Header
const Home = props => <PageLayout>
  // The rest components of your page
</PageLayout

// Inside.js - Here we will use <TopBar /> 
const Inside = props => <PageLayout header='bar'>
  // The rest components of your page
</PageLayout

Collectives™ on Stack Overflow

How to handle 2 Header in reactJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related