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

Paso de Props

Imaginemos que estamos construyendo una tienda en línea.

En este escenario, tenemos un componente principal llamado App, y queremos mostrar información de productos utilizando un componente Product. Podemos transferir 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, se incluye el componente Product y se le pasan las props: name con el valor "Green iguana" y price con el valor 579.

Recepción y uso de props

A continuación, se muestra 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, se define para aceptar un único argumento llamado props. Dentro del componente, se puede 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, se ha creado un componente Product que puede reutilizarse con diferente información de producto varias veces. Es posible 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 se dispone de la flexibilidad para mostrar diversos detalles de productos utilizando el mismo componente Product.

Código completo de la aplicación: