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

Crea una línea de productos para la tienda.

Haz que Product reciba las props name y price y renderice {name} costs ${price} en su párrafo.
En App, renderiza un Product con name Laptop y price 999 (¡como un 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>