Map over children with top level React Children API

Question

I am trying to render the children in a component by mapping over the children with the React Children API.

I can't figure out why but the children are not renderen

import React from "react";
import List from "components/List";

function Artists(): JSX.Element {
  return (
    <List>
      <p key={"1"}> test1</p>
      <p key={"2"}>test2</p>
      <p key={"3"}>test3</p>
      <p key={"4"}>test4</p>
      <p key={"5"}>test5</p>
    </List>
  );
}

export default Artists;

import React, { Children } from "react";
interface List {
  children: JSX.Element[] | null;
}

function List(props: List): JSX.Element {
  const { children } = props;

  return (
    <ul>
      {Children.map(children, (child, i) => {
        <li key={i}>{child}</li>;
      })}
    </ul>
  );
}

export default List;

When I render the children outside the map function they are being rendered

import React from "react";
interface List {
  children: JSX.Element[] | null;
}

function List(props: List): JSX.Element {
  const { children } = props;

  return (
    <ul>
      <li>{children}</li>;
    </ul>
  );
}

export default List;

Can someone point in the direction what I am missing?

Answer 1

I suppose you should return child here

{Children.map(children, (child, i) => {
        <li key={i}>{child}</li>;
      })}

{Children.map(children, (child, i) => {
        return <li key={i}>{child}</li>;
      })}