Map functionality not Displaying anything in UI

Question

I am trying to print a map in ul

<ul className="sub-menu--mega__list">
                <li>
                  {categoryData &&
                    categoryData.map((singleCategory, i) => {
                      <div
                        onMouseOver={handleMouseOver}
                        onMouseOut={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
                            onMouseOver={handleMouseOver}
                            onMouseOut={handleMouseOut}
                            key={i}
                          >
                            <Link
                              href="/shop/left-sidebar"
                              as={process.env.PUBLIC_URL + "/shop/left-sidebar"}
                            >
                              <a>Example1</a>
                            </Link>
                          </div>;
                    </li>
<li>
                          <div
                            onMouseOver={handleMouseOver}
                            onMouseOut={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

Answer 1

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

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

Tell me if it work