Rendering Lists with Markup

Real list items rarely hold a single word. A product row has a name, a price and an image, and a message has an author, a time and some text. So the function given to map usually returns a small block of markup for each item, and the list sits inside other markup such as a page heading. Here, markup means the HTML-like structure that a component writes in JSX.

A Menu of Foods

The example below shows a heading, followed by one block for each food in an array. Each block is a div that contains a paragraph with the food's name and its food class:

const foods = [