Rendering Lists in React

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry'];

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

<ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>

Three strings in an array became three list items on the page, and the component never wrote a loop that creates elements one by one. It only described what one item looks like, and React produced one li for each string. Almost every application shows data like this: products, messages, search results, or comments.