double for loop not rendering from my function - reactjs

Question

I'm trying a double nested for loop but it's not quite unraveling how I predict, advice? am i not allowed to call a double for loop in function? Essentially it suppose to create a navbar from an array of objects i.e [{name:['Jonathan,'bob']},{dob:['may 21','june 22']}]
import React,{Component} from "react";
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
export function navBar(content){
return(
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
{content.map((cont) => {
<NavDropdown title="Dropdown" id={Object.keys(cont)[0]}>
{
Object.values(cont).map((key)=>{<a href={"http://localhost:3000/"+key}>{key}</a>})
}
</NavDropdown>
})}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}

Answer 1

You are not returning from your map functions:
<Nav className='me-auto'>
{content.map((cont) => {
// from here
<NavDropdown title='Dropdown' id={Object.keys(cont)[0]}>
{Object.values(cont).map((key) => {
// and from here
<a href={'http://localhost:3000/' + key}>{key}</a>;
})}
</NavDropdown>;
})}
</Nav>
Solution:
<Nav className='me-auto'>
{content.map((cont) => {
return (<NavDropdown title='Dropdown' id={Object.keys(cont)[0]}>
{Object.values(cont).map((key) => {
return <a href={'http://localhost:3000/' + key}>{key}</a>;
})}
</NavDropdown>);
})}
</Nav>;
Since you are using arrow functions, you can omit the curly brackets and the return:
<Nav className='me-auto'>
{content.map((cont) => (
<NavDropdown title='Dropdown' id={Object.keys(cont)[0]}>
{Object.values(cont).map((key) => (
<a href={'http://localhost:3000/' + key}>{key}</a>
))}
</NavDropdown>
))}
</Nav>;
Also, the content parameter of your navBar is not an array but the props object, so you shouldn't be able to call map on it.
If you use navBar like: <navBar content={...}/>, you have to update its code like:
export function navBar({ content }){
// ...
}