Reactjs: Submenu component, setNavigation - help
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

This sub-menu has 7 options.

When I built this sub-menu I did not know how to set the state 'current' of the menu to the current sub-menu page being displayed using the current: 'true' or 'false' parameter.

So I replicated the sub-menu component 7 times and put a unique sub-menu into each of the 7 page. On each page I just changed the current: true/false parameter.

Are you able to help?
I only want one submenu .



By the way, this is also a way to get rid of several submenu components for different languages. Just like this: add the 'lang' to the component's props (<Sunmenu lang="..." ... />), alter the 'tags' to make items have several names for different languages, etc.
GFalcon 7 months ago
awarded to GFalcon

Crowdsource coding tasks.

1 Solution

Winning solution

Here is the solution that comes to the head first:

1) Remove the current element from all tabs

2) Add props parameter to Submenu function

3) Replace defaultValue={tabs.find((tab) => tab.current).name} with defaultValue={props.current}

4) Replace all occurencies of tab.current ? with === props.current ?

After all this, the submenu-en-nawahi.js will look like this:

import { AnnotationIcon, BookOpenIcon, CalendarIcon, CollectionIcon, DocumentSearchIcon, MusicNoteIcon, ViewListIcon } from '@heroicons/react/outline';  
import Link from 'next/link';
import { useRouter } from 'next/router';

const tabs = [
  { name: "Narrative", href: '/en/nawahi-narrative', icon: AnnotationIcon },
  { name: "Timeline", href: '/en/nawahi-timeline', icon: CalendarIcon },
  { name: "Lessons", href: '/en/nawahi-lessons', icon: CollectionIcon },
  { name: "Songs", href: '/en/nawahi-songs', icon: MusicNoteIcon },
  { name: "Books", href: '/en/nawahi-books', icon: BookOpenIcon },
  { name: "Index", href: '/en/nawahi-index', icon: ViewListIcon },
  { name: "ʻŌlelo Resources", href: '/en/nawahi-waihona', icon: DocumentSearchIcon },

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')

function handleChange(e, router) {
  const selectedTab = tabs.find(tab => ===;

export default function Submenu(props) {
  const router = useRouter();
  return (
      <div className="sm:hidden">
        <label htmlFor="tabs" className="sr-only">
          Select a tab
        {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
          className="block w-full focus:ring-beige-default focus:border-beige-default border-gray-300 rounded-md"
          onChange={(e) => handleChange(e, router)}
          { => (
            <option key={}>{}</option>
      <div className="hidden sm:block">
        <div className="border-b bg-white border-gray-200">
          <nav className="-mb-px flex flex-wrap justify-center space-x-4" aria-label="Tabs">
            { => (
              <Link href={tab.href}>
           === props.current
                      ? 'border-primary text-primary'
                      : 'border-transparent text-gray-500 hover:text-beige-default hover:border-beige-default',
                    'group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm leading-4'
                  aria-current={ === props.current ? 'page' : undefined}
                  <div className="flex-col mx-auto">
               === props.current ? 'text-primary' : 'text-gray-400 group-hover:text-beige-default',
                        'mx-auto h-4 w-4'

5) On every page, replace <SubMenu /> with <SubMenu current="Books" />, <SubMenu current="ʻŌlelo Resources" /> etc, i.e. the name of the page in the submenu.

Hope this simple solution would be useful for you. Please comment with some feedback. Thank you!

Nice work GFalcon! I like your code :) Thank you too.
fullakingi 7 months ago