Ejercicio: Componentes y props

Objetivo

Construir un componente Producto configurable con props y un contenedor Lote que use children.

Cómo se trabaja

Escribe un componente llamado App (puedes crear los demás que necesites). Prueba tu código en el editor de abajo; cuando funcione, pega todo el archivo en el comprobador. Los import de react se aceptan y se ignoran, porque aquí React ya está cargado.

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

• Crea un componente Producto que reciba las props nombre, precio, enOferta (por defecto false) y moneda (por defecto "$").
• Hazlo devolver un <article className="producto"> con un <h3> con el nombre y un <p className="precio"> con la moneda y el precio con dos decimales (por ejemplo, $25.00).
• Si enOferta es true, muestra dentro del <h3> un <span className="oferta">¡Oferta!</span>.
• Crea un componente Lote con children que muestre un <section className="lote"> con un <h2> (prop titulo) y el contenido.
• En App, dentro de un <Lote titulo="Oficina">, escribe tres productos: Teclado 25 (en oferta), Mouse 12.5 y Monitor 180 (en oferta).

function Producto({ nombre, precio, enOferta = false, moneda = "$" }) {
  return (
    <article className="producto">
      <h3>
        {nombre} {enOferta && <span className="oferta">¡Oferta!</span>}
      </h3>
      <p className="precio">{moneda}{precio.toFixed(2)}</p>
    </article>
  );
}

function Lote({ titulo, children }) {
  return (
    <section className="lote">
      <h2>{titulo}</h2>
      {children}
    </section>
  );
}

export default function App() {
  return (
    <Lote titulo="Oficina">
      <Producto nombre="Teclado" precio={25} enOferta />
      <Producto nombre="Mouse" precio={12.5} />
      <Producto nombre="Monitor" precio={180} enOferta />
    </Lote>
  );
}