React.useState

Así quede cuando me di cuenta que en mi trabajo me hacían trabajar con Class Components en lugar de esta maravilla

Leí “RecuéState” en el título de la clase. Debo de estar cansado… 😅
.
.
.

¿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 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>

Yo, agregue un pseudo elemento en la siguiente parte:

.product-info figure img:hover {
  cursor: pointer;
}

Intenté implementarlo con los iconos respectivos y el estado en que se encuentre, más adelante me imagino que se obtendrá el estado de si está o no en el carrito y se podrá tomar desde las porps… así me quedó implementado

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

	const addToCartHandler = () => {
		setCart(!cart);
	}
	return (
		<div className="ProductItem">
			<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" />
			<div className="product-info">
				<div>
					<p>$120,00</p>
					<p>Bike</p>
				</div>
				<figure onClick={addToCartHandler} >
					<img src={!cart ? addToCart: addedToCard} alt="" />
				</figure>
				{cart}
			</div>
		</div>
	);
}

Mi cara al ver que en esta clase literalmente explicaron otra vez como usar useState despues de venir siguiendo la ruta de “Frontend con React.js”: 😐

Jajajaj, si de algo estoy seguro es que al terminar esta ruta nunca se me olvidara como usar useState

La forma correcta de actualizar un estado cuando se hace click en un botón:

const [ count, setCount ] = React.useState(1);
return (
	<button onClick={ () => setCount(count + 1) }>
	¡Click me!
	</button>
);

tengo una duda
hice todo exactamente como dice en el video y no me aparece ni siquiera la imagen de la bicicleta

<
import React, { useState } from 'react';
import '@styles/ProductItem.scss';

import addToCart from '@icons/bt_add_to_cart.svg';

const ProductItem = () => {
	const [cart, setCart] = useState('');
	const handleCLick = () => {
		setCart('hola mundo');
	}
	return (
		<div className="ProductItem">
			<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" />
			<div className="product-info">
				<div>
					<p>$120,00</p>
					<p>Bike</p>
				</div>
				<figure onClick={handleClick} >
					<img src={addToCart} alt="" />
				</figure>
				{cart}
			</div>
		</div>
	);
}

export default ProductItem;

> 

Friendly reminder 💻

Por qué se define una constante con un array después de invocar la función useState?
.
Si te preguntas esto, cuando tienes la costumbre de definir variables o constantes te manera literal const ejemplo = 'ejemplo', la razón es que la función useState devuelve un array con dos elementos: la variable de estado y la función “setter” para cambiar su valor siempre que se le aplique.
.
Por supuesto, el argumento inicial que le pasamos a la función es el estado inicial (que se guarda en el primer elemento del array):

  const [count, setCount] = useState(0);

Este ejemplo y más información la puedes profundizar en la documentación de React y en esta clase de manejo de estado del curso introductorio a React. :3

Lo que mas me gusta de los errores es cuando no existen

Ya con todos los preparativos y recursos graficos, ahora si en este modulo empezamos a trabajar la logica !

Fact: Reach hooks are changing the way we work on ReactJS