En React, props (abreviatura de propiedades) son un mecanismo potente para personalizar y transferir datos desde un componente padre a un componente hijo. Esta característica permite crear componentes reutilizables y flexibles dentro de la aplicación.

Paso de Props

Imaginemos que estamos desarrollando una tienda en línea.

En este escenario, tenemos un componente principal llamado App, y queremos mostrar información de un producto utilizando un componente Product. Podemos pasar el nombre y el precio del producto como props desde App a Product.

Así es como se realiza en la práctica:

// Parent Component (`App`)
const App = () => (
  <>
    <h1>Online Store</h1>
    <Product name="Green iguana" price={579} />
  </>
);

En el componente App, incluimos el componente Product y le pasamos las props: name con el valor "Green iguana" y price con el valor 579.

Recepción y uso de props

Ahora, veamos el componente Product, que recibe estas props:

// Child Component (`Product`)
const Product = (props) => (
  <>
    <p>Product name: {props.name}</p>
    <p>Price: ${props.price}</p>
  </>
);

En el componente Product, lo definimos para aceptar un solo argumento llamado props. Dentro del componente, podemos acceder a los valores de estas props utilizando la notación de punto (.) seguida del nombre de la propiedad (por ejemplo, props.name y props.price).

Uso práctico

Con este enfoque, hemos creado un componente Product que puede reutilizarse con diferente información de producto varias veces. Podemos personalizar fácilmente el contenido de texto de cada componente Product proporcionando diferentes props.

<Product name="Yellow cheetah" price={1099} />
<Product name="Panda" price={449} />

Ahora tenemos la flexibilidad de mostrar varios detalles de productos utilizando el mismo componente Product.

Código completo de la aplicación: