Gatsby useState hook not working in preview mode

Developing with Prismic
1

On my website i have a mobile menu thats state is toggled by a useState hook. Its initial value is set to false. When false it gets applied a class of just "sidebar". When it is true it gets a class of "sidebar sidebar--active". Everything works fine when preview mode is not active, but when it is active no classes get applied to my div. This issue also only occurs on my production (netlify) link, with my local preview i experience no issues.

import React from "react"
import { Link } from "gatsby"
import navbarLinks from "../../constants/navbarLinks"
import { FaTimes } from "react-icons/fa"
import SocialIcons from "../SocialIcons"

const Sidebar = ({ navbarActive, setNavbarActive }) => {
  return (
    <div className={navbarActive ? "sidebar sidebar--active" : "sidebar"}>
      <button
        type="button"
        className="sidebar__toggle"
        onClick={() => {
          setNavbarActive(false)
        }}
      >
        <FaTimes />
      </button>
      <div className="sidebar__list mb-3">
        {navbarLinks.map(link => {
          const { url, text } = link
          return (
            <li className="sidebar__list-item" key={url}>
              <Link
                to={url}
                activeClassName="sidebar__list-link--active"
                className="sidebar__list-link"
                onClick={() => {
                  setNavbarActive(false)
                }}
              >
                {text}
              </Link>
            </li>
          )
        })}
      </div>
      <SocialIcons />
    </div>
  )
}
export default Sidebar
2

Hey @kahloocoder, welcome to the community!

It seems like an issue from React. You need to make sure all any shared components are used in the preview template. Do you see any particular warning in the console when running the preview?

4

I figured out my issue. I'm not really sure why this makes a difference but I had my structure for navbar like this wrapped by fragment.

Navbar.js

<>
   <Navbar/>
   <Sidebar/>
</>

Then I changed the fragment to be wrapped in a header tag and now works

<header>
   <Navbar/>
   <Sidebar/>
<header/>
5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.