GFalcon's solution to "Reactjs: Submenu component, setNavigation - help"

Here is the solution that comes to the head first:

\n1) Remove the current<\/code> element from all tabs<\/code>

\n2) Add props<\/code> parameter to Submenu<\/code> function

\n3) Replace defaultValue={tabs.find((tab) => tab.current).name}<\/code> with defaultValue={props.current}<\/code>

\n4) Replace all occurencies of tab.current ?<\/code> with tab.name === props.current ?<\/code><\/p>\n\n

After all this, the submenu-en-nawahi.js<\/code> will look like this:<\/p>\n

import<\/span> {<\/span> AnnotationIcon<\/span>,<\/span> BookOpenIcon<\/span>,<\/span> CalendarIcon<\/span>,<\/span> CollectionIcon<\/span>,<\/span> DocumentSearchIcon<\/span>,<\/span> MusicNoteIcon<\/span>,<\/span> ViewListIcon<\/span> }<\/span> from<\/span> '@heroicons/react/outline'<\/span>;<\/span>  \nimport<\/span> Link<\/span> from<\/span> 'next/link'<\/span>;<\/span>\nimport<\/span> {<\/span> useRouter<\/span> }<\/span> from<\/span> 'next/router'<\/span>;<\/span>\n\nconst<\/span> tabs<\/span> =<\/span> [<\/span>\n  {<\/span> name<\/span>:<\/span> &<\/span>quot<\/span>;<\/span>Narrative<\/span>&<\/span>quot<\/span>;,<\/span> href<\/span>:<\/span> '/en/nawahi-narrative'<\/span>,<\/span> icon<\/span>:<\/span> AnnotationIcon<\/span> },<\/span>\n  {<\/span> name<\/span>:<\/span> &<\/span>quot<\/span>;<\/span>Timeline<\/span>&<\/span>quot<\/span>;,<\/span> href<\/span>:<\/span> '/en/nawahi-timeline'<\/span>,<\/span> icon<\/span>:<\/span> CalendarIcon<\/span> },<\/span>\n  {<\/span> name<\/span>:<\/span> &<\/span>quot<\/span>;<\/span>Lessons<\/span>&<\/span>quot<\/span>;,<\/span> href<\/span>:<\/span> '/en/nawahi-lessons'<\/span>,<\/span> icon<\/span>:<\/span> CollectionIcon<\/span> },<\/span>\n  {<\/span> name<\/span>:<\/span> &<\/span>quot<\/span>;<\/span>Songs<\/span>&<\/span>quot<\/span>;,<\/span> href<\/span>:<\/span> '/en/nawahi-songs'<\/span>,<\/span> icon<\/span>:<\/span> MusicNoteIcon<\/span> },<\/span>\n  {<\/span> name<\/span>:<\/span> &<\/span>quot<\/span>;<\/span>Books<\/span>&<\/span>quot<\/span>;,<\/span> href<\/span>:<\/span> '/en/nawahi-books'<\/span>,<\/span> icon<\/span>:<\/span> BookOpenIcon<\/span> },<\/span>\n  {<\/span> name<\/span>:<\/span> &<\/span>quot<\/span>;<\/span>Index<\/span>&<\/span>quot<\/span>;,<\/span> href<\/span>:<\/span> '/en/nawahi-index'<\/span>,<\/span> icon<\/span>:<\/span> ViewListIcon<\/span> },<\/span>\n  {<\/span> name<\/span>:<\/span> &<\/span>quot<\/span>;<\/span>ʻŌ<\/span>lelo<\/span> Resources<\/span>&<\/span>quot<\/span>;,<\/span> href<\/span>:<\/span> '/en/nawahi-waihona'<\/span>,<\/span> icon<\/span>:<\/span> DocumentSearchIcon<\/span> },<\/span>\n]<\/span>\n\nfunction<\/span> classNames<\/span>(<\/span>...<\/span>classes<\/span>)<\/span> {<\/span>\n  return<\/span> classes<\/span>.<\/span>filter<\/span>(<\/span>Boolean<\/span>)<\/span>.<\/span>join<\/span>(<\/span>' '<\/span>)<\/span>\n}<\/span>\n\nfunction<\/span> handleChange<\/span>(<\/span>e<\/span>,<\/span> router<\/span>)<\/span> {<\/span>\n  const<\/span> selectedTab<\/span> =<\/span> tabs<\/span>.<\/span>find<\/span>(<\/span>tab<\/span> =><\/span> tab<\/span>.<\/span>name<\/span> ===<\/span> e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>);<\/span>\n  router<\/span>.<\/span>push<\/span>(<\/span>selectedTab<\/span>.<\/span>href<\/span>);<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> function<\/span> Submenu<\/span>(<\/span>props<\/span>)<\/span> {<\/span>\n  const<\/span> router<\/span> =<\/span> useRouter<\/span>();<\/span>\n  return<\/span> (<\/span>\n    <<\/span>div<\/span>><\/span>\n      <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>sm<\/span>:<\/span>hidden<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n        <<\/span>label<\/span> htmlFor<\/span>=&<\/span>quot<\/span>;<\/span>tabs<\/span>&<\/span>quot<\/span>;<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>sr<\/span>-<\/span>only<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n          Select<\/span> a<\/span> tab<\/span>\n        </<\/span>label<\/span>><\/span>\n        {<\/span>/*<\/span> Use<\/span> an<\/span> &<\/span>quot<\/span>;<\/span>onChange<\/span>&<\/span>quot<\/span>;<\/span> listener<\/span> to<\/span> redirect<\/span> the<\/span> user<\/span> to<\/span> the<\/span> selected<\/span> tab<\/span> URL<\/span>.<\/span> */<\/span>}<\/span>\n        <<\/span>select<\/span>\n          id<\/span>=&<\/span>quot<\/span>;<\/span>tabs<\/span>&<\/span>quot<\/span>;<\/span>\n          name<\/span>=&<\/span>quot<\/span>;<\/span>tabs<\/span>&<\/span>quot<\/span>;<\/span>\n          className<\/span>=&<\/span>quot<\/span>;<\/span>block<\/span> w<\/span>-<\/span>full<\/span> focus<\/span>:<\/span>ring<\/span>-<\/span>beige<\/span>-<\/span>default<\/span> focus<\/span>:<\/span>border<\/span>-<\/span>beige<\/span>-<\/span>default<\/span> border<\/span>-<\/span>gray<\/span>-<\/span>300<\/span> rounded<\/span>-<\/span>md<\/span>&<\/span>quot<\/span>;<\/span>\n          defaultValue<\/span>=<\/span>{<\/span>props<\/span>.<\/span>current<\/span>}<\/span>\n          onChange<\/span>=<\/span>{(<\/span>e<\/span>)<\/span> =><\/span> handleChange<\/span>(<\/span>e<\/span>,<\/span> router<\/span>)}<\/span>\n        ><\/span>\n          {<\/span>tabs<\/span>.<\/span>map<\/span>((<\/span>tab<\/span>)<\/span> =><\/span> (<\/span>\n            <<\/span>option<\/span> key<\/span>=<\/span>{<\/span>tab<\/span>.<\/span>name<\/span>}<\/span>><\/span>{<\/span>tab<\/span>.<\/span>name<\/span>}<\/span></<\/span>option<\/span>><\/span>\n          ))}<\/span>\n        </<\/span>select<\/span>><\/span>\n      </<\/span>div<\/span>><\/span>\n      <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>hidden<\/span> sm<\/span>:<\/span>block<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n        <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>border<\/span>-<\/span>b<\/span> bg<\/span>-<\/span>white<\/span> border<\/span>-<\/span>gray<\/span>-<\/span>200<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n          <<\/span>nav<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>-<\/span>mb<\/span>-<\/span>px<\/span> flex<\/span> flex<\/span>-<\/span>wrap<\/span> justify<\/span>-<\/span>center<\/span> space<\/span>-<\/span>x<\/span>-<\/span>4<\/span>&<\/span>quot<\/span>;<\/span> aria<\/span>-<\/span>label<\/span>=&<\/span>quot<\/span>;<\/span>Tabs<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n            {<\/span>tabs<\/span>.<\/span>map<\/span>((<\/span>tab<\/span>)<\/span> =><\/span> (<\/span>\n              <<\/span>Link<\/span> href<\/span>=<\/span>{<\/span>tab<\/span>.<\/span>href<\/span>}<\/span>><\/span>\n                <<\/span>a<\/span>\n                  key<\/span>=<\/span>{<\/span>tab<\/span>.<\/span>name<\/span>}<\/span>\n                  className<\/span>=<\/span>{<\/span>classNames<\/span>(<\/span>\n                    tab<\/span>.<\/span>name<\/span> ===<\/span> props<\/span>.<\/span>current<\/span>\n                      ?<\/span> 'border-primary text-primary'<\/span>\n                      :<\/span> 'border-transparent text-gray-500 hover:text-beige-default hover:border-beige-default'<\/span>,<\/span>\n                    'group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm leading-4'<\/span>\n                  )}<\/span>\n                  aria<\/span>-<\/span>current<\/span>=<\/span>{<\/span>tab<\/span>.<\/span>name<\/span> ===<\/span> props<\/span>.<\/span>current<\/span> ?<\/span> 'page'<\/span> :<\/span> undefined<\/span>}<\/span>\n                ><\/span>\n                  <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>flex<\/span>-<\/span>col<\/span> mx<\/span>-<\/span>auto<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                    <<\/span>tab<\/span>.<\/span>icon<\/span>\n                      className<\/span>=<\/span>{<\/span>classNames<\/span>(<\/span>\n                        tab<\/span>.<\/span>name<\/span> ===<\/span> props<\/span>.<\/span>current<\/span> ?<\/span> 'text-primary'<\/span> :<\/span> 'text-gray-400 group-hover:text-beige-default'<\/span>,<\/span>\n                        'mx-auto h-4 w-4'<\/span>\n                      )}<\/span>\n                      aria<\/span>-<\/span>hidden<\/span>=&<\/span>quot<\/span>;<\/span>true<\/span>&<\/span>quot<\/span>;<\/span>\n                    /><\/span>\n                    <<\/span>span<\/span>><\/span>{<\/span>tab<\/span>.<\/span>name<\/span>}<\/span></<\/span>span<\/span>><\/span>\n                  </<\/span>div<\/span>><\/span>\n                </<\/span>a<\/span>><\/span>\n              </<\/span>Link<\/span>><\/span>\n            ))}<\/span>\n          </<\/span>nav<\/span>><\/span>\n        </<\/span>div<\/span>><\/span>\n      </<\/span>div<\/span>><\/span>\n    </<\/span>div<\/span>><\/span>\n  )<\/span>\n}<\/span>\n<\/pre><\/div>\n

4) On every page, replace <SubMenu /><\/code> with <SubMenu current=&quot;Books&quot; /><\/code>, <SubMenu current=&quot;ʻŌlelo Resources&quot; /><\/code> etc, i.e. the name of the page in the submenu. <\/p>\n\n

Hope it would help.<\/p>\n

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 (
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
) } 45) On every page, replace `` with ``, `` etc, i.e. the name of the page in the submenu. Hope it would help.
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 (
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
) } 5) On every page, replace `` with ``, `` etc, i.e. the name of the page in the submenu. Hope itthis simple solution would help.be useful for you. Please comment with some feedback. Thank you!

User: GFalcon

Question: Reactjs: Submenu component, setNavigation - help

Back to question