Why is this working fine with 'gatsby build' and not working with 'gatsby develop'?

[lukolszewski]

Im trying to build a simple navbar with the current page entry using a different class.

I'm using the code from the tutorial, with index.js that imports layout.js and that imports header.js. I'm passing the pageTitle and the menuLinks to the header. There I'm using menuLinks.map to create multiple

<li>

elements for my menu. I have a ternary statement in the li that checks if pageTitle equals to current link.name and selects classes based on that.

The weird behavior is that if I run gatsby build the resulting static files are perfectly fine. The classes are correctly assigned. However when I'm running gatsby develop it is as if my ternary never gets processed. Neither of the class is assigned.

What's even weirder is that while the develop server is runnig I can change the class names in the ternary and it will work once, but then if I refresh it disappears again. Any advice? I'd rather not have to use client side JS for something that can be done on the server side.

Here is the header.js code:

import React from "react"
import { Link } from "gatsby"
import PropTypes from "prop-types"

const Header = ({ siteTitle, pageTitle, menuLinks }) => (
  <header class="bg-white border-gray-200 dark:bg-gray-900">
    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
    <a href="https://flowbite.com/" class="flex items-center">
        <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 mr-3" alt="Flowbite Logo" />
        <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
    </a>
    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
        <span class="sr-only">Open main menu</span>
        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
        </svg>
    </button>
    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
      <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
      {menuLinks.map(link => (
                <li key={link.name} >
                <Link class={link.name === pageTitle ? "block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" : "block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"} aria-current={link.name === pageTitle ? "page" : ""} to={link.link}>
                    {link.name}
                </Link>
                </li>
              ))}
      </ul>
    </div>
  </div>
  
  </header>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
  pageTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header