Mapping Objects in React

I am a student with Vets Who Code. VWC is a veteran-led and operated non-profit that focuses on training veterans, like me, in web development and software engineering principles, free of charge with the focus on starting careers as JavaScript developers.

The past couple of weeks we have been learning React. One of the first things we learned was how to map an array into a list (<li>Something here</li>) using the example on the React docs website. The example they use is:

const numbers = [1, 2, 3, 4, 5];
    const listItems = numbers.map((number) =>
      <li>{number}</li>
    );

Pretty simple, but if you wanted to use BrowserRouter found in React Router API to map a navigation bar it's not so straightforward. The long way to do it is type it all out, like this:

    const NavBar = props => {
        return  (
            <Router>
                <ul className="nav">
                    <li>
                        <Link to="About">About</Link>
                    </li>
                </ul>
                 <ul className="nav">
                    <li>
                        <Link to="About">About</Link>
                    </li>
                </ul>
                ...and so on
            </Router>

What I wanted to do was combine the example on the React website and do it in the <Router>. I thought, why not put the path and the page in an object and then iterate through them?
Here is what I came up with:

NavBar component

const  NavBar = props =>  {
    const  links = props.links;
    const  items = Object.entries(links).map(([key, value])  =>  {
    return  (
        <li key={key.id}>
            <Link  to={value}>{key}</Link>
        </li>
    );
});
return  (
<Router>
    <ul className="nav">{items}</ul>
</Router>

App Component

const links = {
  Home: "./",
  Resume: "./resume",
  Projects: "./projects",
  About: "./about",
  Contact: "./contacts"
};
function App() {
  return (
    <div className="App">
      <Header />
        <NavBar links={links} />
      <Button />
    </div>
  );
}
export default App;

I am amazed at how powerful React is and what can be done with it. While I am only still hitting the wavetops, I can see why it is one of the most popular libraries in JavaScript.

Any comments? Let's start a discussion below.

Hey while you're here, Vets Who Code could sure use your help. Since 2014 they have been successfully training veterans in web development. A donation will be used to teach veterans how to program in javascript and help them get jobs in our amazing software engineering industry for free. To date they have exclusively helped over 150 veterans find careers as engineers at zero cost to veterans and spouses! You can donate here: https://vetswhocode.io/donate