React allows you render both markup and lists. Markup looks alot like HTML and refers to the structural part of a component written in JSX.

Here is an example of markup and list rendering:

function App(){
  return(
    <Menu />
  )
}

const MenuData = [
  {name: "rice", class:"carbohydrate"},
  {name: "beans", class:"protein"},
  {name: "maize", class:"carbohydrate"}
]


function Menu(){
  return(
    <>
    <h1>Food and their classes</h1>
    {MenuData.map((menu, index)=>(
      <div key={index}>
        <p>{menu.name} : {menu.class}</p>
      </div>
    ))}
    </>
  )
}

In this example,

• The code iterates through each item in the MenuData array. For each item (or "menu"), it creates a <div> containing a <p> element.
• The <p> element displays the name and class of each menu item from the MenuData array.

Output

Inspecting Elements

On the browser Inspect Tab, we have this:

Inspection confirms that 3 divs were rendered dynamically, each with a paragraph element.

In conclusion, you've learned how to render lists and markup in React, along with techniques for efficiently rendering lists. Mastering efficient list rendering empowers you to build consistent, high-performance user interfaces in React.