React remove last url from anchor inside li

I want to remove the last url of an anchor tag (href="") inside a list in React.

This is the code that I have:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const Link = ({ ...props }) => <TranslationsLink {...props} />;

const Navbar: FC<Props> = () => {
  return (
    <Nav>
      <List>
        {list.map((el, i) => {
          const lastEl = i === list.length - 1;

          return (
            <Item key={el.route}>
              <Link
                lastEl={lastEl}
              >
                {el.text}
              </Link>
            </Item>
          );
        })}
      </List>
    </Nav>
  );
};

const TranslationsLink: FC<ITranslationsLink> = memo(({ ...props }) => {
  const { findRouteByName, activeLocale } = useRouter();

  const routeMatch = findRouteByName(route, locale || activeLocale);

  const url = routeMatch.getUrl(params);
  const nextLink = routeMatch.getNextLink(params);

  const link = (
    <a href={url} {...props}>
      {children}
    </a>
  );

  return <Link href={nextLink} as={url} children={link} />;
});

<!-- end snippet -->

I tried passing the lastEl to the Link component so I can override it's href:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

<Link href={props.lastEl ? '' : nextLink}

<!-- end snippet -->

The problem is that because that same link it's being used in other places I'm getting false... How can I avoid that without creating another Link component for the last element?

You can add condition to your map like this:

const Navbar: FC<Props> = () => {
  return (
    <Nav>
      <List>
        {list.map((el, i) => {
          const lastEl = i === list.length - 1;

          return lastEl ? null : // just check for the lastEl here
            (<Item key={el.route}>
              <Link
                lastEl={lastEl}
              >
                {el.text}
              </Link>
            </Item>
          );
        })}
      </List>
    </Nav>
  );
};

I found the answer:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const Navbar: FC<Props> = () => {
  return (
    <Nav>
      <List>
        {list.map((el, i) => {
          const lastEl = i === list.length - 1;

          return
            (<Item key={el.route}>
            {lastEl ? (
                <span>{el.text}</span>
              ) : (
                <Link>
                  {el.text}
                </Link>
              )}
            </Item>
          );
        })}
      </List>
    </Nav>
  );
};

<!-- end snippet -->