I am working with React and trying to build a multi-level and dynamic navmenu with submenu and sidemenu.

This is my nav.js component.

import React from "react";
import SubMenu from "./submenu";

function Navbar () {
    return (
        <>
          <ul>
              <li>
                  <span> Home </span>
              </li>
              <li>
                  <span> Category </span>
                  <SubMenu subtitle="Category" />
              </li>
              <li>
                  <span> Pages </span>
                  <SubMenu subtitle="Pages" />
              </li>
           </ul>
        </>
    );
}

export default Navbar;                             

And this is my submenu.js component.

import React from "react";

function SubMenu (props) {
    const navtitle = props.subtitle;
    const allSubMenuItem = {
        Category: [
            {
                id: 1,
                title: "Grocery",
            },
            {
                id: 2,
                title: "Fashion",
            },
            {
                id: 3,
                title: "Electronics",
            }
        ]
        Pages: [
            {
                id: 1,
                title: "Abouts Us",
            },
            {
                id: 2,
                title: "Contact us",
            },
            {
                id: 3,
                title: "Term & Conditions",
            }
       ]
    }
    function menuBody (index, title) {
        const sid = index;
        const stitle = title;
        return (
            <>
              <li key={ sid }>
               <span> { stitle } </span>
              </li>
            </>
        );
    };
    return (
        <>
          <ul>
            {
              allSubMenuItem[`"${navtitle}"`].map((data, index) => (
                 menuBody(index, data.title)
              ))
            }
           </ul>
        </>
    );
}

export default SubMenu;

I am getting an error "Uncaught TypeError: allSubMenuItem[((""" (intermediate value)) """)] is undefined". Here I am using props to send the nav-menu-title to the submenu components. And the submenu component get the nav-menu-title from the parent component. I verified that using alert(`"${navtitle}"`) The problem is I can't access the variable navtitle at this line of my code allSubMenuItem[`"${navtitle}"`].map((data, index) => How can I access the props values inside of allSubMenuItem[].map() ?

CodePudding user response：

You need to remove double qoutation marks while dynamically getting the object key

 <ul>
            {
              allSubMenuItem[`${navtitle}`].map((data, index) => (
                 menuBody(index, data.title)
              ))
            }
           </ul>

Here is your complete Navbar.

import React from "react";
import SubMenu from "./submenu";

function Navbar() {
  return (
    <>
      <ul>
        <li>
          <span> Home </span>
        </li>
        <li>
          <span> Category </span>
          <SubMenu subtitle="Category" />
        </li>
        <li>
          <span> Pages </span>
          <SubMenu subtitle="Pages" />
        </li>
      </ul>
    </>
  );
}

export default Navbar;

function SubMenu(props) {
  const navtitle = props.subtitle;

  const allSubMenuItem = {
    Category: [
      {
        id: 1,
        title: "Grocery"
      },
      {
        id: 2,
        title: "Fashion"
      },
      {
        id: 3,
        title: "Electronics"
      }
    ],
    Pages: [
      {
        id: 1,
        title: "Abouts Us"
      },
      {
        id: 2,
        title: "Contact us"
      },
      {
        id: 3,
        title: "Term & Conditions"
      }
    ]
  };

  function menuBody(index, title) {
    const sid = index;
    const stitle = title;
    return (
      <>
        <li key={sid}>
          <span> {stitle} </span>
        </li>
      </>
    );
  }
  return (
    <>
      <ul>
        {allSubMenuItem[`${navtitle}`].map((data, index) =>
          menuBody(index, data.title)
        )}
      </ul>
    </>
  );
}

CodePudding user response：

allSubMenuItem is an object. Hence if you want to map through it, use need to use Object.keys(myObject).map()

So, your submenu.js should probably look like this

import React from "react";

function SubMenu (props) {
    const navtitle = props.subtitle;
    const allSubMenuItem = {
        Category: [
            {
                id: 1,
                title: "Grocery",
            },
            {
                id: 2,
                title: "Fashion",
            },
            {
                id: 3,
                title: "Electronics",
            }
        ]
        Pages: [
            {
                id: 1,
                title: "Abouts Us",
            },
            {
                id: 2,
                title: "Contact us",
            },
            {
                id: 3,
                title: "Term & Conditions",
            }
       ]
    }
    function menuBody (index, title) {
        const sid = index;
        const stitle = title;
        return (
            <>
              <li key={ sid }>
               <span> { stitle } </span>
              </li>
            </>
        );
    };
    return (
        <>
          <ul>
            {
              Object.keys(allSubMenuItem).map((key)=>{
                allSubMenuItem[key].map((data, index) => (
                  menuBody(index, data.title)
                ))
              })
            }
           </ul>
        </>
    );
}

export default SubMenu;