¿Cómo usar useState?

useState es una manera de usar estado con los React Hooks. Recordemos que los estados son maneras en la que un componente puede administrar información cambiante en el entorno, y después de ser llamado se renderiza el React DOM de nuevo.

Para ello primero importamos useState de react

import React, { useState } from 'react';

Ahora, useState será incorporado en nuestro componente ProductItem

const ProductItem = () => {
	const [cart, setCart] = useState('Hola');

	const handleClick = () => {
		setCart('Hola mundo');
	}
}

Para poder usar los estados, primero debemos crear una constante en la cual tendrá un array. El primero elemento en este caso cart será la variable a la cual le asignaremos un valor de estado. Este valor puede ser de cualquier tipo. En segundo lugar tenemos a setCart. Por convención siempre deberemos escribir esta "función" con set(Variable). Esta será la encargada de asignar un valor cualquiera a cart cada vez que exista algún evento. Esto lo igualamos a useState, que es como una manera de inicializar la variable cart. En segundo lugar tenemos a la función handleClick. handleClick es la función que dada un evento, como un click, será llamada y por dentro usaremos a setCart para asignarle un nuevo estado a la variable cart. No podemos usar directamente setCart, pues puede dar algún error y no es la manera correcta. Por ello, después en el return, donde tenemos el html, lleva la siguiente estructura.

<figure onClick={handleClick}>
		<img src={buttonAddCart} alt="" />
</figure>

Al momento de darle click en figure, llama a la función handleClick del componente, y handleClick por dentro cambiará el estado de la variable de estado por uno nuevo. En este caso, cambiamos el valor de cart de hola, por hola mundo.

¿Cómo acceder a la variable?

Para acceder a dicha variable cart en el html, podemos usar llaves en donde pasaremos el nombre. Esto es más fácil, pues de otra manera, tendremos que usar más array's y acceder con el índice, el cual dificulta la lectura.

<div className="product-info">
				<div>
					<p>$120,00</p>
					<p>Bike</p>
				</div>
				<figure onClick={handleClick}>
					<img src={buttonAddCart} alt="" />
				</figure>
				{cart} // acceder a la variable
</div>