a basic react component rendering a list items from an array in typescript

index.ts
import React from 'react';

interface Props {
  items: string[];
}

const List: React.FC<Props> = ({ items }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default List;
257 chars
18 lines

Explanation:

• We import React from the react package along with defining the Props interface for the component.
• Props is an object containing the items to be rendered as an array of strings.
• The List component is defined as a functional component accepting the props object.
• It returns an unordered list (<ul>) containing the list items (<li>) generated by mapping through the array of items and rendering each one.
• Each <li> element requires a key attribute, so we use the index of each item as a unique key.
• Finally, the List component is exported for use elsewhere in the application.