How to fix ‘cannot be used as a JSX component’ error with TypeScript and React?

To fix the error ‘cannot be used as a JSX component’ error with React TypeScript, we need to make sure our component returns a single root element.

For instance, we write

function Items(): JSX.Element {
  return (
    <>
      {items.map((item) => (
        <li>{item.name}</li>
      ))}
    </>
  );
}

to put our array of items in the Items component in a fragment so that the component can be compiled.

We call items.map to render an array of li elements so we need to wrap them with a fragment.