Muitos produtos de uma lista

Com a peça pronta, use .map sobre um array de objetos para gerar um <Produto> por item — passando os campos como props:

const produtos = [
  { nome: "Planta", preco: 25 },
  { nome: "Vaso", preco: 40 }
];

return (
  <div>
    {produtos.map((p) => (
      <Produto key={p.nome} nome={p.nome} preco={p.preco} />
    ))}
  </div>
);

🎯 Aqui está tudo junto: array de objetos (JS) + .map (transforma em tela) + key (identidade) + <Produto> (componente) + props (os dados). Isto é uma vitrine de e-commerce real.