No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Introducci贸n a React.js

Curso de Introducci贸n a React.js

Juan David Castro Gallego

Juan David Castro Gallego

Manejo del estado

9/23
Recursos

El estado en React nos ayuda a crear datos mutables o datos que pueden ser modificados.

Para manejar el estado depende del si nuestro componente es generado con una clase o si es un componente funcional.

  • Clase: Para manejar el estado dentro de una clase podemos crearlo en el constructor de la clase, y para actualizarlo utilizamos el setter setState
  • Funci贸n Si estamos en un componente funcional podemos utilizar el hook de estado, que nos regresar谩 arreglo con un getter (que ser谩 el valor de nuestro estado) y un setter (una funci贸n para actualizar el estado).

驴Qu茅 son los Hooks?

Los聽Hooks聽son funciones que te permiten enganchar el estado de聽React聽y el ciclo de vida desde componentes funcionales, entre muchas otras cosas. Nos permiten usar聽React聽sin clases.

Estado en componentes clase

Para manejar el estado en componentes clase necesitamos crearlo como una propiedad dentro de nuestro componente clase, usamos this.state, y para actualizar el estado, la clase de React ya tiene un setter: this.setState. (Dentro de este tipo de componentes no se pueden usar los hooks).

class Component extends React.Component {
    constructor(){
        this.state = {
            patito: '馃憤'
        }
    }
    
    render(){
        return (
            <button onClick={()=>this.setState("Has dado un like")}>{this.state.patito}</button>
        )
    }
}

Estado en componentes funcionales

El manejo del estado en estos componentes es mucho m谩s sencillo, utilizando el hook de estado.
Podemos importar este hook directamente de React o desestructur谩ndolo de React:

import React from 'react';

function Component() {
    const [count, setCount] = React.useState("");
}
import { useState } from 'react';

function Component() {
    const [count, setCount] = useState("");
}

Una vez lo importamos ya podemos usarlo en nuestro componente, este hook nos regresar谩 un array con dos elementos:

  1. El valor de nuestro estado (Getter).
  2. La funci贸n que se ocupa de actualizar nuestro estado (Setter).

Tambi茅n podemos pasarle un valor inicial a nuestro estado dentro de los par茅ntesis.
Por ejemplo, en el buscador de nuestra aplicaci贸n,

import React from 'react';
import './TodoSearch.css';

function TodoSearch() {
  const [searchValue, setSearchValue] = React.useState('');
  
  const onSearchValueChange = (event) => {
    console.log(event.target.value);
    setSearchValue(event.target.value);
  };

  return [
    <input
      className="TodoSearch"
      placeholder="Cebolla"
      value={searchValue}
      onChange={onSearchValueChange}
    />,
    <p>{searchValue}</p>
  ];
}

export { TodoSearch };

Tipos de componentes

Stateful: son componentes que tienen declaraci贸n de estado en su funci贸n.

Stateless:聽son componentes que no tienen ning煤n tipo de estado declarado en el cuerpo de la funci贸n.

Contribuci贸n creada por: Brandon Argel.

Aportes 37

Preguntas 17

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Para poder manejar los estados, vamos a necesitar de react el useState.

//Si quieres importar todo React para usar useState
import React from 'react';
//Lo vas a usar de esta forma:
const [searchValue, setSearchValue] = React.useState('')

//Si quieres importar unicamente useState
import { useState } from 'react';
//Lo vas a usar de esta forma: 
const [searchValue, setSearchValue] = useState('')

useState tiene dos elementos:

  • El valor (quien seria value)
  • La funcion que cambia el valor (quien seria setValue)

En useState es siempre necesario definir un valor como parametro. Puede ser un string, array, booleano o n煤mero

const [searchValue, setSearchValue] = useState('')
const [searchValue, setSearchValue] = useState(false)
const [searchValue, setSearchValue] = useState(['Dorime', 'Ameno'])
const [searchValue, setSearchValue] = useState(0)

En la etiqueta donde vamos a manejar el evento, no debemos olvidar colocar el value que recibir谩 el valor de useState. Ejemplo:

<input
  className="TodoSearch"
  placeholder="Ingresa un POYO Todo"
  value={searchValue}
	onChange={onSearchValueChange}
/>

Espero que les haya ayudado 馃専 .

Un poco de info sobre como funcionan m谩s los ESTADOS en React:
.
Las actualizaciones de estado pueden ser as铆ncronas. React puede agrupar varias invocaciones a setState() en una sola actualizaci贸n para mejorar el rendimiento.
Debido a que props y state pueden actualizarse de forma asincr贸nica, no debes confiar en sus valores para calcular el siguiente estado.

//Creando el estado
const [stateX, setStateX] = React.useState(0); 

// Incorrecta forma de modificar el estado nuevo, usando el estado actual ya que podr铆a fallar al ser as铆ncrono.
setStateX(stateX + props.increment);

Para arreglarlo, usa una segunda forma de setState() que acepta una funci贸n en lugar de un objeto. Esa funci贸n recibir谩 el estado previo como primer argumento, y las props en el momento en que se aplica la actualizaci贸n como segundo argumento:

// Forma correcta de actualizarlo si necesitamos usar el estado previo en el calculo.
setStateX((stateX, props) => ({
  stateX + props.increment
}))

No nos sucede en nuestra app, pero para saberlo frente a nuevos casos donde tengamos quehacer algo similar y no sepamos porqu茅 falla.

Lo genial de usar estados en nuestra aplicaci贸n es que podemos empezar a trabajar con 鈥渞eactividad鈥 (porque ir贸nicamente React no usa el patr贸n reactivo), pero conociendo el estado de nuestra aplicaci贸n podemos simplemente usar esa variable que contiene el valor de nuestro estado en cualquier parte de la aplicaci贸n (e incluso repetidas veces) y cuando cambiemos su valor usando la funci贸n que se encarga de actualizar nuestro estado, 隆esta se actualizar谩 autom谩ticamente en cualquier lugar en donde la usemos!
.
Esa es una de las cosas que hacen que usar este tipo de librer铆as sea muy c贸modo. Podemos simplemente actualizar los valores de nuestras variables sin tener que preocuparnos por actualizar esa variable tambi茅n en nuestra vista 馃槍.

Aun que ya conozca y maneje React, tomar estos cursos b谩sicos son geniales, se aprende mucho.

Como peque帽a sugerencia, recomendaria tomar el curso de Richard como complementaci贸n, lo que dice Juan es cierto ya casi ni se usa React con clases pero igual creo que puede ser de 煤tilidad aprenderlo. 馃槃

Estoy volviendo a ver el curso despu茅s de aprobarlo, haciendo modificaciones al proyecto y ahora me han quedado m谩s claros estos conceptos 馃榿

8.-Manejo del estado

El estado nos permite manejar los valores e informaci贸n guardada en nuestros componentes de manera que puedan cambiar en el futuro, estos van a cambiar cuando el usuario haga alguna acci贸n.

Vamos a combinar el estado con los eventos para que la app reaccione a las interacciones de los usuarios.

En el componente padre (App) vamos a crear un estado, este estado se lo vamos a pasar por medio de props a todos los componentes que llamamos dentro de App, de esta manera logramos que todos los componentes puedan cambiar (sin importar en que componente interact煤e el usuario) porque escuchan los cambios enviados desde el componente padre.

De esta manera agregamos un estado a nuestros componentes cuando los creamos como funciones

const estado = React.useState();

Se puede hacer tambi茅n con clases pero en esta ocasi贸n usaremos React Hooks, que son herramientas que empiezan por 鈥渦se鈥. Es importante que cuando queramos crear un estado en estos componentes que son funciones tenemos que llamar al useState, y el estado inicial se escribe directamente.

useState devuelve un array de dos posiciones, la posici贸n 0 tiene nuestro estado, y la posici贸n 1 tiene una funci贸n llamada setState (o como queramos llamarla) que nos va a permitir editar nuestro estado. Cuando se actualiza el estado y se llama la funci贸n setState lo que ocurre es que se vuelve a renderizar el componente.

const [state, setState] = React.useState("Juan"); 
//state y setState pueden llevar el nombre que queramos

NOTA: React no puede renderizar varias etiquetas en un mismo componente, si no que se necesita una etiqueta que los envuelva a todos o se puede mandar un array.

Increible lo bien y detallado que explica Juan 鉂わ笍 Reforc茅 y actualice muchisimo contenido del curso de Richard de 2019

Ac谩 el link de la documentaci贸n en espa帽ol que habla sobre el estado y te puede ser 煤til para reforzar el conocimiento.

Me encanta este profesor, en alg煤n momento pens茅 que pudieron darle el curso debido a cuestiones de marketing, ya que es joven y entusiasta, y eso engancha, pero conociendo ya algo de React y habiendo visto los cursos del los anteriores profesores, me permito opinar que este es el curso mejor estructurado de React, y que Juan David conoce y mucho del tema. Excelente curso.

隆Incre铆ble! Por fin entend铆 detalladamente c贸mo funcionan los estados, es un tema que lo he estado viendo durante semanas y este ha sido el video m谩s claro, ten铆a que ser en Platzi. Muchas gracias Juan excelente explicaci贸n!

馃槂

muy bien explicado, el tema de hooks es extenso pero muuuuy util

Que buena clase esta, estuvo tremenda.

que emoci贸n

Manejo de State con valores no primitivos.

Es decir cuando hablamos de Objetos o de Arrays.

Recordemos el tema de Valor vs Referencia.
igualando referencia:

const a = {}
const b = a;
b.x = 7;
console.log(b) // 7
console.log(a) //7

Esto sucede porque b apunta a la misma referencia de a. Y por eso nos retorna un 7.
Ahora que pasa si uso el operador spread:

const a = {}
const b = {...a};
b.x = 7;
console.log(b) // 7
console.log(a) // {}

Cuando pasamos a b con el spread operator, lo que hacemos es pasar una copia exacta de a y no su referencia.
Ejemplo con React.
Si hacemos esto no funcionara el contador.

const Likes = () => {
	console.log('Render likes');
	const [likes, setLikes] = useState({val: 0})
	
	return <Button onClick={() =>{
					likes.val = likes.val +1;
					setLikes(likes)
}}
					</Button>;
};

Por lo cual debemos siempre hacer una copia

const Likes = () => {
	console.log('Render likes');
	const [likes, setLikes] = useState({val: 0})
	
	return <Button onClick={() =>{
					const newLikes = {...likes}
					newLikes.val++;
					setLikes(newLikes )
}}
					</Button>;
};

As铆 ya estamos devolviendo el valor copia m谩s el valor actual.

Muy solicitados los React hooks. Ya entiendo de que hablan.

Miren el codigo resultante de clase. Quiza les funciona para guiarse

import React, { useState } from 'react';

const TodoSearch = () => {
  const [searchValue, setSearchValue] = useState('')
  const onSearchEvent = (event: any) => setSearchValue(event.target.value)

  return (<>
    <div className="p-6 flex justify-center">
      <input
        type="text"
        className="border p-2 border-slate-300 hover:border-b-indigo-900 focus:outline-none"
        placeholder='Buscar o crear nueva tarea'
        onChange={onSearchEvent}
      />
    </div>
    <span className="">{`Estas buscando: ${searchValue}`}</span>
  </>);
};

export default TodoSearch;

Juan: lo que vamos a hacer es crear una variable
Also Juan: declara una constante

Casi parto el teclado en pedazos luego de darme cuenta el desperdicio de utilizar vanilla js en mis proyectos habiendo react, vueks y quien sabe cuantas tecnologias mas , es broma pero el react js esta fabuloso

Su entusiasmo es tan contagioso que dan ganas de seguir y seguir

Recuerdo mi primer acercamiento a React y teniamos que extender de componente y hacerlo a pie, este curso es m谩s inmersivo por la Manipulaci贸n del DOM

Cada clase es mejor que la anterior, Gracias al gran juanDC.

Yo estoy manejando el todo List de una manera diferente, lo estoy haciendo mal ?

Este es mi componente de TodoList. el cual referencio o llamo en APP

import { TodoItem } from './TodoItem';

import style from '../styles/TodoList.module.scss'

export function TodoList({ todos, toggleTodo, searchValue }) {
	
	let searchTodos = [];

	// Si la longitud de searchValue es mayor a uno 
	if (!searchValue.length >= 1) {
		searchTodos = todos;
	}else {
		searchTodos = todos.filter(todo => {
			const todoText = todo.task.toLowerCase();
			const searchText = searchValue.toLocaleLowerCase();
			return todoText.includes(searchText)
		})
	}

	return (
		<ul className={style.TodoList}>
			{searchTodos.map(todo => (
				<TodoItem key={todo.id} todo={todo} toggleTodo={toggleTodo} />
			))}
		</ul>
	);
}

Algunos apuntes sobre la clase, vaya que con los estados se trabajara m谩s f谩cilmente ya que con solo cambiar un valor la vista y el c贸digo estar谩n sincronizados!

Hook useState =>
declarammos una variable const [variableA, SetCambiarElEstadoDeLaVariable] = useState (鈥渧ariableB鈥)
si en el html ponemos {variableA}
y dentro de los parentesis escribimos "variableB"
en nuestro template va a aparecer el nombre de variableB
y asi podemos jugar con muchas cosas como poner en una etiqueta =>
<p className{variableA ? 鈥渃olorAzul鈥 : 鈥淐olorRojo鈥潁> cambiar color de texto </p>
si ponemos en donde dice variableB, un true el color del texto seria azul y si ponemos false cambiaria a rojo

RESUELTO: no entiendo por que el value => es una convencion de react componentes controlados. https://es.reactjs.org/docs/forms.html

Se dieron cuenta que dice 鈥淓nrtique鈥

Handling states

Going to give a state to Parent Component app.js to all other components can listen to the events that happen.

When our components aren鈥檛 classes else functions we should call to React.useState() , the state returns an array with 2 positions: [the state, the function to set a new state] [state, setState] .

Code

import React from 'react';
import './TodoSearch.css';

function TodoSearch() {
  const [searchValue, setSearchValue] = React.useState('');

  const onSearchValueChange = (event) => {
    console.log(event.target.value);
    setSearchValue(event.target.value);
  };

  return [
    <input
      className="TodoSearch"
      placeholder="Cebolla"
      value={searchValue}
      onChange={onSearchValueChange}
    />,
    <p>{searchValue}</p>
  ];
}

export { TodoSearch };

To add an state on React we declare a variable 鈥渢hat is an array with 2 positions鈥 and use React.useState() . With the first position we can get the actual state and the second is to set a new state, usually name setState and this is a function. And in the same component we can put into a input the new state and on another element from my component use that state.

Les dejo uno de mis apuntes, que espero les sea de utilidad.

State VS Props

El state(estado) es una estructura mutable que es usada para contener data/informaci贸n acerca del componente y puede cambiar siempre que se necesite.

El cambio de un estado se produce a una acci贸n o un evento. El state es el coraz贸n de React, debido a que este determina el comportamiento del Componente y como se renderiza.

Dicha data/informaci贸n solo puede ser accedida o modificada dentro del componente o directamente por el mismo(componente).

Y, los Props?

Como vimos en anteriores cap铆tulos, los props son objetos inmutables que almacenan el valor de los atributos de una etiqueta (similar a los HTML attributes), el cual nos permite enviar data de Componente a Componente, similar a los argumentos de una funci贸n.

Cuando un componente deber铆a tener estado?
El state es opcional, solo toma en cuenta que el state incrementa la complejidad y reduce la visibilidad(lectura) de un componente. En definitiva un Componente sin state es preferible.

Esto no quiere decir que no hagamos uso de ello, porque no usarlos nos daria como resultado una app no interactiva (y matando el concepto por el cual JS fue creado), tan solo debemos tener un uso consciente del state.

manejo del estado
manejando estados y haciendo combinaciones de metodos en react

combinacion y manejando los estados de react

mport React from "react";
import './TodoSearch.css';

function TodoSearch(){
    const [searchValue, setSearchValue] = React.useState('')

    const onSearchValueChange = (event)=>{
        console.log(event.target.value)
        setSearchValue(event.target.value)
    }
    return[
        <input 
            className="TodoSearch" 
            placeholder="Cebolla"
            value={searchValue}
            onChange={onSearchValueChange}
        />,
        <p>{searchValue}</p>
];
}

export {TodoSearch};
import React from "react";
import './TodoSearch.css';

function TodoSearch(){
    const [searchValue, setSearchValue] = React.useState('')

    const onSearchValueChange = (event)=>{
        console.log(event.target.value)
        setSearchValue(event.target.value)
    }
    return[
        <input 
            className="TodoSearch" 
            placeholder="Cebolla"
            value={searchValue}
            onChange={onSearchValueChange}
        />,
        <p>{searchValue}</p>
];
}

export {TodoSearch};

Me agrada la energ铆a con la que el profesor explica y hace entender las cosas tan f谩cil

Aparte de ver el manejo b谩sico del estado con el Hook useSate, tambi茅n es bueno ver los componentes controlados. En el minuto 11:12 Juan agrega el atributo value={searchValue}, esto hace que el input se integre con el estado y cualquier cambio que se realice el input tambien se actualizara.
React Componente controlados

Bueno, algo que podemos hacer es en el import react es que podemos importar el useState.

import React, { useState } from "react";

importamos el useState,

const [searchValue, setSearchValue] = useState('')

y asi cada que creamos un estado no tenemos que usar

React.useState('');  
si no que solo usamos 
useState('');
 

Alguien sabr铆a por qu茅 se produce, estos warnings amarillos y rojos en la consola?