React.useState

Clase 17 de 30 • Curso de React 17 con Webpack 5 y Sass

Clase anteriorSiguiente clase

Cabeza De Bongle

student•

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

Irving Juárez

student•

Si trabajas con clases no tiene nada de malo, ya que FB le sigue dando soporte. Sin embargo, es mejor cambiar a hooks de ahora en adelante, para trabajar con código mas moderno

Paolo Joaquin Pinto Perez

student•

Estoy de acuerdo, pero no tiene nada de malo trabajar con class components, de hecho es muy bueno saber al menos la sintaxis. Muchas veces tenemos que dar mantenimiento a proyectos muy grandes de hace 4-5 años(esto pasa 100%) y por el costo que tendriamos y darle la mejor solucion en costos(tiempo y $$$), trabajamos en base a ello.

German Cavani

student•

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

Eduardo Zegers

student•

10/10 ingenio

Julian Alberto Patino Mosquera

student•

Sin quererlo me diste una convención para nunca olvidarme de importar "cueState" de Rec XD

Braulio Rivas Abad

student•

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

Kao Lo

student•

muchas gracias!!

Juan Carlos Montilla Sánchez

student•

Excelente la explicación, solo quiero aportar que aunque en el evento se mande directo, no quiere decir que se va a romper el programa, sino que se va a ejecutar cada vez que haga render nuestra aplicación

Daniel Rodriguez Davila

student•

Yo, agregue un pseudo elemento en la siguiente parte:

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

Sergio Maury

student•

Hola Daniel! Excelente aporte, sin embargo no es necesario asignar la propiedad al pseudo elemento :hover, con que lo asignes al elemento está bien, ya que la propiedad se activa al poner el cursor sobre el elemento en cuestión, por tal motivo esta, por decirlo así: tiene internamente un :hover intrínsecamente. ¡Prueba y me cuentas!

.product-info figure img { width: 35px; height: 35px; cursor: pointer; }

Cristian Contreras

student•

Jajajajaaj Yo hice lo mismo. No me aguanté. 😰

Lucas Ojeda de Sousa

student•

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

Cristian Mauricio Cavanzo Arias

student•

Nunca esta de mas un repaso a lo que uno sabe

Angel David Contreras Barrios

student•

La idea es repasar conceptos de cursos anteriores y tener todo el panorama claro y fresco..

Rodrigo Ramos Xochiteotzin

student•

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

Kenneth Angulo L

student•

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

Joe Harry Mancera Monroy

student•

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>
	);
}

Luis Alejandro Vera Hernandez

student•

Interesante el uso con booleanos (y)

Kevin Salazar

student•

Wow, super aporte

Walter Omar Barrios Vazquez

student•

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>
);

Freddy René Carías Vásquez

student•

Yo le deje en null, así no me aparece en 1 hasta que le de click

const [cart, setCart] = React.useState(null);

Cuando le doy click

JUAN CAMILO CAMPO TANGARIFE

student•

Lógica con React Hooks

Nos ayudan a trabajar al estado o ciclo de vida de un componente. En este caso haremos que un componente pueda recibir eventos.

Concepto del Estado en React

Importamos {useState} from ‘react’
en la lógica de nuestro componente vamos a crear una const [cart,setCart] = useState([]); esto siginifica que la función setCart va a retornar un valor y lo va a guardar en cart.
debajo crearemos la función que va a ser activada con un addEventListener en la etiqueta <figure OnClick={}> que va a activar la función setCart(’Con el valor’)
y podremos llamar este valor simplemente convocando la constante así : {cart}

import React, {useState} from 'react'
import iconcart from '@icons/bt_add_to_cart.svg'
const ProductItem = () => {
    //[estado, función modificadora hacía el estado] esto parte del useState
    const [cart,setCart] = useState('');
    const handleClick = ()=>{
        setCart('HelloWorld')
    }
    
    return (
        <article className="product-card">
            <img src="https://i.imgur.com/uYKmdB1.png" alt="product1" />
            <div className="product-card-info">
                <div className="details-container">
                    <p>$120,00</p>
                    <p>Headphones</p>
                </div>
                <figure onClick={handleClick}>
                    <img src={iconcart} alt="botón de añadir a carrito de compras" />
                </figure>
                {cart}
            </div>
        </article>
    )
}

export default ProductItem

Santiago Alejandro Castro

student•

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;

>

Santiago Alejandro Castro

student•

me aparece de esta forma

Javier Salcedo Salgado

student•

Cuando no te sale nada en pantalla es porque hay algún error en tu código, este caso es que tienes

figureonClick={handleClick}

y te has volado el espacio debería quedar así y veras que ya te funciona.

figure onClick={handleClick}

German Cavani

student•

¿Alguien sabe como hace el profe para que aparezca la imagen en pequeño en la línea 9?

Santi Orduno

student•

El maestro utiliza una extensión para Vscode llamada Image preview. La recomiendo, es bastante útil.

German Cavani

student•

Gracias!

Pedro Juan Guerrero Muñoz

student•

Me parece que el profesor debe mejorar la forma de explicar las clases, en muchas ocasiones es redundante y repite la misma palabra muchas veces, esto por lo menos en mi caso y seguramente para otros estudiantes, hace que se distorsione un poco la idea que quiere comunicar y sea mas complejo entender el tema. Por otro lado pienso que hay ciertos conceptos básicos que fueron explicados muchas veces en los cursos de introducción a React entre ellos el manejo del estado y que no deberían repetir en un curso practico.

Romen Ter Gazarian

student•

++Use state++

1:  import React, { useState } from 'react'; 
2:
3:  function Example() {
4:    const [count, setCount] = useState(0); 
5:
6:    return (
7:      <div>
8:        <p>You clicked {count} times</p>
9:        <button onClick={() => setCount(count + 1)}>
10:         Click me
11:        </button>
12:      </div>
13:    );
14:  }

• **Línea 1: **Importamos el Hook useState desde React que nos permite mantener un estado local en un componente de función. • Línea 4: Dentro del componente Example declaramos una nueva variable de estado llamando al Hook useState. Este nos devuelve un par de valores, a los que damos un nombre. Llamamos count a nuestra variable porque guarda el número de clicks en el botón. La inicializamos a cero pasando 0 como único argumento a useState. El segundo elemento retornado es una función que nos permite actualizar count, por lo que le llamamos setCount. • **Línea 9: **Cuando el usuario hace click, llamamos a setCount con un nuevo valor. React actualizará entonces el componente Example pasándole el nuevo valor de count.

Fuente: https://es.reactjs.org/docs/hooks-state.html

Romen Ter Gazarian

student•

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

Nelson Gonzalez Escalante

student•

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

Andrés Muñoz

student•

Para const [cart, setCart] = useState(''), cada vez que el componente se inicializa el cart y la función setCart son nuevos valores, nuevas referencias ?

Leobardo Adrián Herrera

student•

Hay algo que me pueda facilitar validar formularios?

Oscar Barajas Tavares

Team Platzi•

Puedes revisar este paquete: https://www.npmjs.com/package/react-form

Andres Cavedal

student•

Es usual el onClick? o es igual de "malo" como cuando lo usamos en HTML en vez de js con una funcion?

Oscar Stevens Cuartas Bejarano

student•

alguien me podria compartir enlace de la documentacion oficial de REACTJS en donde esten todos esos metodos del API como el de onClick y otros pero de esta version que estamos viendo??, me tiene perdido encontrar eso

Lucas Aristizábal

student•

esos métodos, los adoptó React de Js, onClick, onChange y otros. mira aquí te lo explica Fazt https://youtu.be/rLoWMU4L_qE?t=10572

React.useState

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js