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 del código.
<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>