Transformar dados em tela

Você tem um array de produtos e quer um <li> para cada. A ferramenta é o .map() — ele transforma cada item do array em um pedaço de JSX:

const produtos = ["Planta", "Vaso", "Adubo"];

return (
  <ul>
    {produtos.map((p) => <li>{p}</li>)}
  </ul>
);

🧠 Modelo mental: .map é uma linha de montagem: entra um array de dados, sai um array de <li>. Uma peça de tela por item, automaticamente.

É o casamento perfeito com o que você aprendeu: no back-end/JS os dados vêm como array de objetos; no React, o .map os transforma em tela.