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 .

Screenshot: https://www.dropbox.com/s/hmlbjyb5p53gll0/Screen%20Shot%202021-11-01%20at%202.42.29%20PM.png?dl=0

Code

https://www.dropbox.com/sh/hhdhvzbfaw3cvna/AACl1RhpcArALrbRt8__4yYda?dl=0

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 1 year ago
CfutnEdW
gbtagbbj 6 months ago
-1 OR 2+53-53-1=0+0+0+1
gbtagbbj 6 months ago
-1 OR 3+53-53-1=0+0+0+1
gbtagbbj 6 months ago
1 RLIKE (SELECT (CASE WHEN (104=104) THEN 1 ELSE 0x28 END)) --
gbtagbbj 6 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 6 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 6 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 6 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 6 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 6 months ago
GmqES0eK'
gbtagbbj 6 months ago
-5 OR 359=(SELECT 359 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
-5) OR 446=(SELECT 446 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
-1)) OR 950=(SELECT 950 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
bHwagFoO' OR 84=(SELECT 84 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
tLqvHK7d') OR 380=(SELECT 380 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
7TKco1OE')) OR 22=(SELECT 22 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
1*DBMSPIPE.RECEIVEMESSAGE(CHR(99)||CHR(99)||CHR(99),15)
gbtagbbj 6 months ago
1'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 6 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 6 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 6 months ago
-1 OR 2+666-666-1=0+0+0+1 --
gbtagbbj 6 months ago
-1 OR 3+666-666-1=0+0+0+1 --
gbtagbbj 6 months ago
-1 OR 2+781-781-1=0+0+0+1
gbtagbbj 6 months ago
-1 OR 3+781-781-1=0+0+0+1
gbtagbbj 6 months ago
-1' OR 2+591-591-1=0+0+0+1 --
gbtagbbj 6 months ago
-1' OR 3+591-591-1=0+0+0+1 --
gbtagbbj 6 months ago
-1' OR 2+469-469-1=0+0+0+1 or 'WowyOv0N'='
gbtagbbj 6 months ago
-1' OR 3+469-469-1=0+0+0+1 or 'WowyOv0N'='
gbtagbbj 6 months ago
-1" OR 2+759-759-1=0+0+0+1 --
gbtagbbj 6 months ago
-1" OR 3+759-759-1=0+0+0+1 --
gbtagbbj 6 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 6 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 6 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 6 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 6 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 6 months ago
5sM9fkhl'
gbtagbbj 6 months ago
-5 OR 306=(SELECT 306 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
-5) OR 938=(SELECT 938 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
-1)) OR 292=(SELECT 292 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
buD33lMD' OR 486=(SELECT 486 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
iQ9Y4G5t') OR 516=(SELECT 516 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
9Cz29Zko')) OR 900=(SELECT 900 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
*DBMSPIPE.RECEIVEMESSAGE(CHR(99)||CHR(99)||CHR(99),15)
gbtagbbj 6 months ago
'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 6 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 6 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 6 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 tab.name === 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 => tab.name === e.target.value);
  router.push(selectedTab.href);
}

export default function Submenu(props) {
  const router = useRouter();
  return (
    <div>
      <div className="sm:hidden">
        <label htmlFor="tabs" className="sr-only">
          Select a tab
        </label>
        {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
        <select
          id="tabs"
          name="tabs"
          className="block w-full focus:ring-beige-default focus:border-beige-default border-gray-300 rounded-md"
          defaultValue={props.current}
          onChange={(e) => handleChange(e, router)}
        >
          {tabs.map((tab) => (
            <option key={tab.name}>{tab.name}</option>
          ))}
        </select>
      </div>
      <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">
            {tabs.map((tab) => (
              <Link href={tab.href}>
                <a
                  key={tab.name}
                  className={classNames(
                    tab.name === 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={tab.name === props.current ? 'page' : undefined}
                >
                  <div className="flex-col mx-auto">
                    <tab.icon
                      className={classNames(
                        tab.name === props.current ? 'text-primary' : 'text-gray-400 group-hover:text-beige-default',
                        'mx-auto h-4 w-4'
                      )}
                      aria-hidden="true"
                    />
                    <span>{tab.name}</span>
                  </div>
                </a>
              </Link>
            ))}
          </nav>
        </div>
      </div>
    </div>
  )
}

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 1 year ago
-1 OR 2+933-933-1=0+0+0+1 --
gbtagbbj 6 months ago
-1 OR 3+933-933-1=0+0+0+1 --
gbtagbbj 6 months ago
-1 OR 2+662-662-1=0+0+0+1
gbtagbbj 6 months ago
-1 OR 3+662-662-1=0+0+0+1
gbtagbbj 6 months ago
-1' OR 2+141-141-1=0+0+0+1 --
gbtagbbj 6 months ago
-1' OR 3+141-141-1=0+0+0+1 --
gbtagbbj 6 months ago
-1' OR 2+382-382-1=0+0+0+1 or 'tTAUrapd'='
gbtagbbj 6 months ago
-1' OR 3+382-382-1=0+0+0+1 or 'tTAUrapd'='
gbtagbbj 6 months ago
-1" OR 2+740-740-1=0+0+0+1 --
gbtagbbj 6 months ago
-1" OR 3+740-740-1=0+0+0+1 --
gbtagbbj 6 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 6 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 6 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 6 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 6 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 6 months ago
h6zYqfe4'
gbtagbbj 6 months ago
XkIMzou9' OR 518=(SELECT 518 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
vgfxQe9t') OR 368=(SELECT 368 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
jI5lKoy0')) OR 22=(SELECT 22 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
e'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 6 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 6 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 6 months ago
-1 OR 2+640-640-1=0+0+0+1 --
gbtagbbj 6 months ago
-1 OR 3+640-640-1=0+0+0+1 --
gbtagbbj 6 months ago
-1 OR 2+452-452-1=0+0+0+1
gbtagbbj 6 months ago
-1 OR 3+452-452-1=0+0+0+1
gbtagbbj 6 months ago
-1' OR 2+529-529-1=0+0+0+1 --
gbtagbbj 6 months ago
-1' OR 3+529-529-1=0+0+0+1 --
gbtagbbj 6 months ago
-1' OR 2+602-602-1=0+0+0+1 or 'tmLJSqZZ'='
gbtagbbj 6 months ago
-1' OR 3+602-602-1=0+0+0+1 or 'tmLJSqZZ'='
gbtagbbj 6 months ago
-1" OR 2+107-107-1=0+0+0+1 --
gbtagbbj 6 months ago
-1" OR 3+107-107-1=0+0+0+1 --
gbtagbbj 6 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 6 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 6 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 6 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 6 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 6 months ago
GnAV5YSS'
gbtagbbj 6 months ago
-5 OR 308=(SELECT 308 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
-5) OR 378=(SELECT 378 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
-1)) OR 388=(SELECT 388 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
wOIM9VFc' OR 353=(SELECT 353 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
ZDpCEEFV') OR 197=(SELECT 197 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
jwNReX45')) OR 303=(SELECT 303 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
555*DBMSPIPE.RECEIVEMESSAGE(CHR(99)||CHR(99)||CHR(99),15)
gbtagbbj 6 months ago
555'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 6 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 6 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 6 months ago
-1 OR 2+201-201-1=0+0+0+1 --
gbtagbbj 6 months ago
-1 OR 3+201-201-1=0+0+0+1 --
gbtagbbj 6 months ago
-1 OR 2+449-449-1=0+0+0+1
gbtagbbj 6 months ago
-1 OR 3+449-449-1=0+0+0+1
gbtagbbj 6 months ago
-1' OR 2+638-638-1=0+0+0+1 --
gbtagbbj 6 months ago
-1' OR 3+638-638-1=0+0+0+1 --
gbtagbbj 6 months ago
-1' OR 2+909-909-1=0+0+0+1 or 'y9hJ6GZU'='
gbtagbbj 6 months ago
-1' OR 3+909-909-1=0+0+0+1 or 'y9hJ6GZU'='
gbtagbbj 6 months ago
-1" OR 2+609-609-1=0+0+0+1 --
gbtagbbj 6 months ago
-1" OR 3+609-609-1=0+0+0+1 --
gbtagbbj 6 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 6 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 6 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 6 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 6 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 6 months ago
XjOZ56sW'
gbtagbbj 6 months ago
-5 OR 145=(SELECT 145 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
-5) OR 314=(SELECT 314 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
-1)) OR 116=(SELECT 116 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
MGEyVOOh' OR 833=(SELECT 833 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
Ko4rkTKh') OR 476=(SELECT 476 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
TULdw8QA')) OR 694=(SELECT 694 FROM PG_SLEEP(15))--
gbtagbbj 6 months ago
*DBMSPIPE.RECEIVEMESSAGE(CHR(99)||CHR(99)||CHR(99),15)
gbtagbbj 6 months ago
'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 6 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 6 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 6 months ago