How to access outer variable inside of Array[..]?

Question

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() ?

This looks like a syntax error to me: "${navtitle}". Should probably just be ${navtitle}. navtitle is in scope and you should be able to access it, so I doubt that accessing its value is the actual problem. — Matt Morgan
– Matt Morgan, Commented Aug 4, 2022 at 13:00
That's perfect and working. I tried to access the array elements manually using allSubMenuItem["Category"] without using props. From that conclusion I thought a double quotation will require to access the elements. — sparrow
– sparrow, Commented Aug 4, 2022 at 13:33
@DaveNewton this is temporary, using data from a file. Next plan to retrieve this from a tiny database system for learning purpose. Any better suggestion will be welcomed. — sparrow
– sparrow, Commented Aug 5, 2022 at 12:22

Meer Humza · Accepted Answer · 2022-08-04 13:00:09Z

1

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>
    </>
  );
}

answered Aug 4, 2022 at 13:00

Meer Humza

591 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

sparrow Over a year ago

I tried to access the array elements manually using allSubMenuItem["Category"] without using props. From that conclusion I thought a double quotation will require to access the elements. Nice works

Samarajya Shrestha · Accepted Answer · 2022-08-04 13:39:30Z

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;

Collectives™ on Stack Overflow

How to access outer variable inside of Array[..]?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related