How to make a dynamic navbar according to the product category in React.js

Question

I have a navbar which has three links like: Women, Men, Kids.

see the image. picture of the used navigation

These three category are coming from a api. I have currently hardcoded the links like:

       <nav>
          <ul className={style.navContainer}>
            <li className={style.navContainer__list}>
              <a
                className={`${style.navContainer__list__item} ${style.is_active}`}
                href="#"
              >
                Women
              </a>
            </li>
            <li className={style.navContainer__list}>
              <a className={style.navContainer__list__item} href="#">
                Men
              </a>
            </li>
            <li className={style.navContainer__list}>
              <a className={style.navContainer__list__item} href="#">
                Kids
              </a>
            </li>
          </ul>
        </nav>

But in future there might be more categories and then i have to again hardcode the new categories. Instead of doing this how can i dynamically render my navigation?

Answer 1

data.map((item)=>(<li className={item.class}>
              <a className={item.item.class} href={item.url}>
                Kids
              </a>
            </li>))