React forEach not printing HTML in TSX

Question

I'm using react with TSX and SCSS

I have searched before and I don't find an answer for this exact problem, so I think isn't duplicated.

I'm trying to do a Header component in React and I have an array of objects (Links) to add in the header.

The array is the following:

const menuLinks: menuLink[] = [
{
  title: "Home",
  path: "/",
  active: false,
},
{
  title: "about",
  path: "/about",
  active: false,
},

];

This links implements the following interface:

interface menuLink {
  title: string;
  path: string;
  active: boolean;
  [propety: string]: any;
}

I'm trying to do a menuLinks.map(.....) to print all the links inside a <nav></nav>.

The forEach im using is the next one:

return (
    <header className="header">
      <div className="logo"></div>
      <nav>
        {menuLinks.map((link, i) => {
          console.log("Entered", link);
          return <Link key={link.path + i} to={link.path} />;
        })}
      </nav>
    </header>
  );

I know for sure that the loop is being executed the correct times cause the console.log is executed correctly. The problem comes, when this loop does not print ANYTHING in the screen.

Any help or idea of why isn't working ?? I come from VueJS and React isn't my expertise.

Thanks in advance

Answer 1

I believe the issue is in <Link /> there is no content, maybe try as:

<Link key={link.path + i} to={link.path}>{link.path}</Link>

That .map() seems fine other than this.

Answer 2

The issue probably is that there is no content in the element. Instead of <Link />, try <Link>{link.title}</Link>