03-rendering

Use map and dynamic data for list items

const items = ["a", "b", "c", "d", "e"];
{items.map((item) => (
  <li key={item} className="list-group-item">
	{item}
  </li>
))}

• the key is needed so react can uniquely identify it

Conditional rendering

{items.length === 0 && <p>No items found</p>}

• if first statement is true, it will render No Items Found
• if the first statement is false, it will render nothing