Dos Props

Parte de la sección Fundamentos del Journey de React de Coddy. Lección 18 de 42.

Los componentes habitualmente reciben varias props. Enuméralas todas en la desestructuración e intégralas en el JSX:

function Product({ name, price }) {
    return <p>{name} costs ${price}</p>;
}

<Product name="Laptop" price={999} />
// renders: Laptop costs $999

Observa los tipos: name es una cadena de texto (comillas), price es un número (llaves). Mantener los números como números importa en el momento en que realizas cálculos con ellos.

Desafío

Fácil

Construye una línea de productos para la tienda.

Haz que Product reciba las propiedades name y price y muestre {name} costs ${price} en su párrafo.
En App, muestra un Product con el nombre Laptop y el precio 999 (¡como número!). La página debe mostrar Laptop costs $999.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>