0

I'm following a short tutorial on youtube, a question I have is, why does this syntax work when creating my component:

function List<ListItem>({
  items,
  render,
}: {
  items: ListItem[];
  render: (item: ListItem) => ReactNode;
}) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{render(item)}</li>
      ))}
    </ul>
  );
}

I prefer arrow functions, I've tried writing it out like this:

const List<ListItem> = ({
  items, 
  render
}: {
  items: ListItem[],
  render: (item: ListItem) => ReactNode
}) => {
  return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        {render(item)}
      </li>
    ))}
  </ul>
  )
}

I'm getting this message in vs code :

JSX element 'ListItem' has no corresponding closing tag

ghostagent151
  • 1,218
  • 2
  • 16
  • 33
  • 2
    Does this answer your question? [What is the syntax for Typescript arrow functions with generics?](https://stackoverflow.com/questions/32308370/what-is-the-syntax-for-typescript-arrow-functions-with-generics) – Emile Bergeron Mar 31 '21 at 19:03
  • 1
    Yes it does, thank you. I did not know the name of that item was a "generic". – ghostagent151 Mar 31 '21 at 19:18

0 Answers0