How can I add sub navigation to menu? - reactjs

Question

I have config file where I have configured the menuItems array as follows. Which is menu.json
{
"menuItems": [
{ "name": "Services", "link": "/services" },
{ "name": "References", "link": "/references" },
{ "name": "Careers", "link": "/careers" },
{ "name": "Our Story", "link": "/story" },
{ "name": "Contact Us", "link": "/contact" },
{ "name": "Guides", "link": "/guides"},
{ "name": "Blog", "link": "/blog" }
]
}
I have tried adding subMenuItems inside the menuItems array but so far it results in error in the query in the useMenu.js
{
"menuItems": [
{ "name": "Services", "link": "/services", "subMenuItems": [ {"name": "Page", "link": "/page"}] },
{ "name": "References", "link": "/references" },
{ "name": "Careers", "link": "/careers" },
{ "name": "Our Story", "link": "/story" },
{ "name": "Contact Us", "link": "/contact" },
{ "name": "Guides", "link": "/guides"},
{ "name": "Blog", "link": "/blog" }
]
}
Then in the querying the items inside the array here in the useMenu.js
import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import { useLocale } from '../hooks/locale'
function useMenu() {
// Grab the locale (passed through context) from the Locale Provider
// through useLocale() hook
const { locale } = useLocale()
// Query the JSON files in <rootDir>/i18n/translations
const { rawData } = useStaticQuery(query)
// Simplify the response from GraphQL
const simplified = rawData.edges.map(item => {
return {
name: item.node.name,
menuItems: item.node.translations.menuItems,
}
})
// Only return menu for the current locale
const { menuItems } = simplified.filter(lang => lang.name === locale)[0]
return menuItems
}
export default useMenu
const query = graphql`
query useMenu {
rawData: allFile(filter: { sourceInstanceName: { eq: "menu" } }) {
edges {
node {
name
translations: childMenuJson {
menuItems {
link
name
subMenuItems {
link
name
}
}
}
}
}
}
}
`
And then adding the subMenuItems to the query. Is this wrong way to do it? How would I be able to add the sub menu there? The menu itself is set here in the navigation.js file and is following:
import React from 'react'
import useMenu from '../useMenu'
import * as S from './styled'
const Navigation = ({ isActive, handleToggleMenu }) => {
const [menuItems, subMenuItems] = useMenu()
return (
<>
<S.Navigation>
{menuItems.map((menu, index) => (
<S.NavigationLink
to={menu.link}
aria-label={menu.name}
activeClassName="active"
key={`${menu.link}${index}`}
>
{menu.name}
</S.NavigationLink>
))}
{subMenuItems.map((subMenu, index) => (
<S.NavigationLink
to={menu.link}
aria-label={subMenu.name}
activeClassName="active"
key={`${subMenu.link}${index}`}
>
{subMenu.name}
</S.NavigationLink>
))}
</S.Navigation>
</>
)
}
export default Navigation
The error I am getting is following: TypeError: Cannot read property '0' of undefined

Answer 1

const [menuItems, subMenuItems] = useMenu() here, you are importing your custom hook from ../useMenu. This hook, since it's a custom-coded one, only accepts the exported values from your useMenu.js file so, it doesn't allow that notation because you are only exporting menuItems:
function useMenu() {
// Grab the locale (passed through context) from the Locale Provider
// through useLocale() hook
const { locale } = useLocale()
// Query the JSON files in <rootDir>/i18n/translations
const { rawData } = useStaticQuery(query)
// Simplify the response from GraphQL
const simplified = rawData.edges.map(item => {
return {
name: item.node.name,
menuItems: item.node.translations.menuItems,
}
})
// Only return menu for the current locale
const { menuItems } = simplified.filter(lang => lang.name === locale)[0]
return menuItems // here, the only export
}
In addition, the way you use the state is not correct. When you set a state using useState hook, like:
const [value, setValue]= useState("hi");
Your state is held by value, so if you want to get the current state's value, you need to access to value, initially set to "hi". setValue is just a helper function that is used to set the new state, so if you want to set a new value, overriding "hi", you need to use the setter function setValue("new value").
Said that I can't know if your useMenu.js logic is correct, assuming that, I guess that you don't want two separate loops to get the subMenuItems data. You should do something like:
import * as S from './styled'
const Navigation = ({ isActive, handleToggleMenu }) => {
const menuItems = useMenu()
return (
<>
<S.Navigation>
{menuItems.map((menu, index) => {
if(menu.subMenuItems){
menu.subMenuItems.map(submenuItem=>{
return console.log(submenuItem);
})
}
return <S.NavigationLink
to={menu.link}
aria-label={menu.name}
activeClassName="active"
key={`${menu.link}${index}`}
>
{menu.name}
</S.NavigationLink>
})}
</S.Navigation>
</>
)
}
export default Navigation
Step by step, your state has changed to:
const menuItems = useMenu()
Since you are exporting menuItems, your data is perfectly valid there. You have your subMenuItems inside the menuItems.
In the same loop where you are iterating through menuItems, you have the nested property of subMenuItems so, if your menu (the iterable variable) has the subMenuItems property, you want to iterate again trough it to get them. In this case, I'm returning a console.log() but adapt it to your navigation menu:
if(menu.subMenuItems.length){
menu.subMenuItems.map(submenuItem=>{
return console.log(submenuItem);
})
}