How to dynamically assign equal space for Menu items in ReactJs and and Bootstrap 4

Question

I have below Menu Component built using bootstrap 4 and ReactJs

I have four menu Items 1) Home 2) Products 3) 404 4)Login

How to build a component where tomorrow if i have 10 menu items then how will i equally space it

currently it appears

import React from "react";
import { Link } from "react-router-dom";

const MENUDATA = [
  { menuLink: "/", menuLabel: "Home" },
  { menuLink: "/products", menuLabel: "Products" },
  { menuLink: "/test", menuLabel: "404" },
  { menuLink: "/login", menuLabel: "Login" }
];

function Menu(props) {
  return (
    <nav class="navbar bg-faded">
      {
        <div class="container">
          <ul class="navbar-nav nav-fill w-100">
            {MENUDATA.map(m => {
              if (m.menuLabel == "Login") {
                return (
                  <li class="nav-item active pull-right" key={m.menuLabel}>
                    <Link class="nav-link" to={m.menuLink}>
                      <i class="fa fa-fw fa-user"></i>
                      {m.menuLabel}
                    </Link>
                  </li>
                );
              } else {
                return (
                  <li class="nav-item active" key={m.menuLabel}>
                    <Link class="nav-link" to={m.menuLink}>
                      {m.menuLabel}
                    </Link>
                  </li>
                );
              }
            })}
          </ul>
        </div>
      }
    </nav>
  );
}

export default Menu;