Props de componentes en React

En la lección anterior mostramos varias instancias de productos:

function App() {
	return <div>
		<Product />
		<Product />
		<Product />
	</div>;
}

Por ahora, cada llamada a la etiqueta del producto muestra en pantalla lo mismo. Ahora hagamos cada producto único.

Supongamos, por ejemplo, que cada producto debe tener un nombre y un precio. Hagamos que cada llamada a la etiqueta del producto muestre un producto con su propio nombre y precio, formateados en el maquetado que necesitamos.

Para esto necesitamos realizar varios pasos.

Para empezar, al llamar a la etiqueta del producto en esta etiqueta escribiremos dos atributos: el atributo name con el nombre del producto y el atributo cost con el precio, así:

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

Los nombres y valores de estos atributos llegarán en forma de objeto al primer parámetro de la función constructora de nuestro componente Product:

function Product(props) {
	console.log(props); // objeto con claves name y cost
	
	return <p>
		product
	</p>;
}

El nombre del parámetro puede ser cualquiera, pero en React se acostumbra llamarlo props. En realidad, esto no es solo el nombre de un parámetro, sino un concepto importante de React.

La esencia de este concepto es la siguiente: al llamar a la etiqueta de un componente, en esta etiqueta se pueden escribir atributos con datos. Estos datos llegarán a los props del componente. Luego, el componente puede usar estos datos, por ejemplo, para crear el maquetado necesario.

Hagamos esto:

function Product(props) {
	return <p>
		nombre: <span>{props.name}</span>,
		precio: <span>{props.cost}</span>
	</p>;
}

Es más conveniente y más aceptado no usar el objeto props, sino realizar inmediatamente una desestructuración de los props directamente en los parámetros de la función:

function Product({ name, cost }) {
	return <p>
		nombre: <span>{name}</span>,
		precio: <span>{cost}</span>
	</p>;
}

Cree un componente Employee que muestre los datos de un empleado en pantalla. Que estos datos sean apellido, nombre, patronímico y salario. Formatee estos datos en el maquetado que desee. Muestre en el componente App tres empleados con datos diferentes.