Responsive 4 page site with ReactJS

Community feedback

• 

  Mark Mitchell•1,820

  @markup-mitchellPosted about 4 years ago

  Hi Diarrah, it looks great!

  You can make it even easier than that by using the state as the source of truth and letting the DOM update accordingly, rather than fetching values into state from the document.

  Declare a single state variable with a default value:

  let [menuOpen, setMenuOpen] = useState(false);

  You can make all kinds of things conditional on that in the render method - whether the overlay appears, which image is used in the button, even the appearance of whole components:

  {
      menuOpen ? <MobileMenu /> : null;
  }
  

  You can use a single function to toggle the state to its opposite with <button onClick={ () => setMenuOpen(!menuOpen)}>

  And you can make the mobile menu close automatically by calling setMenuOpen(false) in response to a change in routing (I don't know the react-router API well enough to suggest how that's done - I think it's differnt from the Next.js router I used here).

  Hope that helps?! I was trying to be as brief as possible!

  2

  ---

  

  Diarrah•3,418

  @DiarrahPosted about 4 years ago

  @markup-mitchell Yes! This would work so much better & I don't know why I didn't think of this earlier lol. I willi implement this after I get off work later.

  Thank you!!

  0