Map functionality not Displaying anything in UI-CodePudding

I am trying to print a map in ul

<ul className="sub-menu--mega__list">
                <li>
                  {categoryData &&
                    categoryData.map((singleCategory, i) => {
                      <div
                        onm ouseOver={handleMouseOver}
                        onm ouseOut={handleMouseOut}
                        key={i}
                      >
                        <Link
                          href="/shop/left-sidebar"
                          as={process.env.PUBLIC_URL   "/shop/left-sidebar"}
                        >
                          <a>{singleCategory.name}</a>
                        </Link>
                      </div>;
                    })}
                </li>
              </ul>

but working fine when i do this

<ul className="sub-menu--mega__list">
                    <li>
                          <div
                            onm ouseOver={handleMouseOver}
                            onm ouseOut={handleMouseOut}
                            key={i}
                          >
                            <Link
                              href="/shop/left-sidebar"
                              as={process.env.PUBLIC_URL   "/shop/left-sidebar"}
                            >
                              <a>Example1</a>
                            </Link>
                          </div>;
                    </li>
<li>
                          <div
                            onm ouseOver={handleMouseOver}
                            onm ouseOut={handleMouseOut}
                            key={i}
                          >
                            <Link
                              href="/shop/left-sidebar"
                              as={process.env.PUBLIC_URL   "/shop/left-sidebar"}
                            >
                              <a>Example2</a>
                            </Link>
                          </div>;
                    </li>
                  </ul>

but i need to make it work with Map function can any one help i am getting the values of categoryData & categoryData.name in console but i am not able to see any data in UI

what am i doing wrong do let me know if any Json file is required but still

you can find the URL for the page at

CodePudding user response：

you need to return value to map function Add return after '{' like

    {categoryData &&
                        categoryData.map((singleCategory, i) => {
                          return <div
                            onm ouseOver={handleMouseOver}
                            onm ouseOut={handleMouseOut}
                            key={i}
                          >
/* rest of code*/

Tell me if it work