Manejo de estado

Clase 15 de 37 • Curso de React.js 2019

Resumen

Hasta esta clase todos los componentes han obtenido su información a través de props que vienen desde afuera (otros componentes) pero hay otra manera en la que los componentes pueden producir su propia información y guardarla para ser consumida o pasada a otros componentes a través de sus props. La clave está en que la información del state a otros componentes pasará en una sola dirección y podrá ser consumida pero no modificada.

Para guardar la información en el estado se usa una función de la clase component llamada setState a la cual se le debe pasar un objeto con la información que se quiere guardar.
Aunque no se ve, la información está siendo guardada en dos sitios. Cada input guarda su propio valor y al tiempo la está guardando en setState, lo cual no es ideal. Para solucionarlo hay que modificar los inputs de un estado de no controlados a controlados.

Erik Elyager

student•

Llamo mi atención el siguiente error:

Palabras más, palabras menos el error dice:

"Un componente está cambiando un input no controlado a controlado. Decida si quiere que sea controlado o NO controlado y déjelo así toda su vida (la vida del componente claro)."

El error aquí es al momento que ReactDOM hace el render de nuestros inputs se topa con por poner un ejemplo el input del firstName:

      value={this.state.firstName}

this.state.firstName evalúa a undefined por no estar definidos desde el principio en el state . Por lo tanto ReactDOM decide que es un Input no controlado.

Cuando handleChange() es llamado y asigna un valor string al this.state.firstName, el input pasa de no controlado a controlado.

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

Esto pasando en todos nuestros inputs menos en el del jobTitle porque ese sí lo definimos en el state al principio.

Mi solución fue definir valores default en el state:

  state = {
    firstName: '',
    lastName: '',
    email: '',
    jobTitle: '',
    twitter: ''
  };

Y chao error, espero les sirva.

más info en controlled-components

Rosma Martínez

student•

Funcionó! Gracias por la ayuda!

Gustavo Adolfo Ramírez Apache

student•

No es un error, es un warning.

jean pierre gabriel nieto acosta

student•

Recuerden que siempre es una buena practica poner placeholders a tus inputs, se hace declarando el Prop en el input de la siguiente manera:

<input type="text" placeholder="introduce tu nombre" />

Ademas de ser una buena practica, ayuda a lidiar con el principal problema del diseño de interfaces, el usuario, no importa que tan especifico sea, siempre habrá un usuario que no entienda o lo use mal.

Bernardo Aguayo Ortega

student•

thanks bro!!

Jose Morales Varon

student•

👏👏

Marco Antonio Macedo Preciado

student•

Para los que necesitan teoría para entender las cosas, como yo, les dejo el pequño resumen de mí investigación:

El state en React es un objeto que deriva de la clase React Component. Puede definirse a sí mismo como un objeto qe almacena las propiedades observables que controlan el comportamiento del componente. (como en este caso el value de los inputs de los formularios)

Bernardo Aguayo Ortega

student•

just like that

Gaspar Dolcemascolo

student•

Gracias

Diego Fernando Rojas Quintero

student•

👋Hola chicos Este es el resumen de esta clase

El estado es por así decirlo un almacén que permite guardar los datos que produce un componente para ser utilizado para asimismo o ser pasado a otros componentes.

Para guardar o actualizar la información de un componente en su estado se usa una función llamada setState() la cual debe pasarse un objeto como parámetro para que sea guardada la información.

setState() puede ser utilizado cuando queramos guardar los datos (puede ser un formulario) después de escuchar un evento de un elemento (input, boton, etc).

state={}
handleChange = e => {
    this.setState({
	[e.target.name] : e.target.value,
      })
  }

Aunque no se ve, la información que se obtiene en el componente se guarda en dos sitios, en el ++state++ y en el elemento de un formulario ++(inputs, textarea, select, etc).++ Lo ideal es tener una sola fuente de información.

Para ello debemos modificar los elementos de un formulario de un estado no controlados (Normalmente los elementos de un formulario mantienen sus propios estados y los actualiza de acuerdo a la interacción del usuario) a controlados (que react sea la única fuente de verdad, es decir, que los valores obtenidos por los elementos del formulario sean controlados por react para mayor información ).

Esto se logra agregando un props llamado value al elemento del formulario para que obtenga la información que contiene el estado del componte.

<input value={this.props.firstName}>
</input>

Cuando se recarga la pagina , el props llamado value del elemento del formulario (el input en este caso) intentara leer los datos del estado, por ello es necesario inicializar state (ya sea vació o no vació) en el componente.

class BadgeForm extends React.Component{
	state={}
	handleChange = e => {
		[e.target.name] : e.target.value
	}
}

++Dale un like en ❤ si te ayudo esta recomendación++

Wilson Delgado

student•

que buen aporte

César Palma

student•

Este compoenent no tiene props, seria

<input value={this.state.firstName}>
</input>

Javier Fuentes Mora

teacher•

Aqui el como se haria con hooks

import React, { useState } from "react";
const BadgeForm = () => {
  const [form, setValues] = useState({
    firstName: "",
    lastName: "",
    email: "",
    jobTitle: "",
    twitter: ""
  });
  const handleInput = event => {
    setValues({
      ...form,
      [event.target.name]: event.target.value
    });
  };

  const handleSubmit = event => {
    event.preventDefault();
    console.log(form);
  };
  return (
    <>
      <h1>New Attendat</h1>

      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>First Name</label>
          <input
            onChange={handleInput}
            className="form-control"
            type="text"
            name="firstName"
            value={form.firstName}
          />
          <label>Last Name</label>
          <input
            onChange={handleInput}
            className="form-control"
            type="text"
            name="lastName"
            value={form.lastName}
          />
          <label>Email</label>
          <input
            onChange={handleInput}
            className="form-control"
            type="email"
            name="email"
            value={form.email}
          />
          <label>Job Title</label>
          <input
            onChange={handleInput}
            className="form-control"
            type="text"
            name="jobTitle"
            value={form.jobTitle}
          />
          <label>Twitter</label>
          <input
            onChange={handleInput}
            className="form-control"
            type="text"
            name="twitter"
            value={form.twitter}
          />
        </div>

        <button className="btn btn-primary">Save</button>
      </form>
    </>
  );
};

export default BadgeForm;

Felipe Salamanca Gonzalez

student•

si quieren solucionar el error que sale al final de la clase en la consola deben darle un valor ya sea vacio o no al State Ejemplo:

state = {
    firstName: "",
    lastName: "",
    email: "",
    jobTitle: "",
    twitter: "",
  }

Jose Alvarez

student•

Gracias.

Carlos Andres Castañeda Osorio

student•

Si la función definida para manejar el evento onChange no fue declarada como una arrow function si no que se declaró como una función más de la clase bajo la estructura de método tradicional, la referencia al objeto this se pierde, por lo que tendremos que hacer uso del método bind como se muestra a continuación:

&lt;input name=&quot;firstName&quot; type=&quot;text&quot; className=&quot;form-control&quot; onChange={this.handleChange.bind(this)}/&gt;

Jose Daniel Huerta Vazquez

student•

Podrías explicarme por qué ocurre eso por favor?

César Palma

student•

La clases son ES6, no se necesita bind, eso solo sucede con las funciones, no con los metodos

Yadiel Vélez

student•

Pienso que es más común inicializar los estados en el constructor de la clase. Así es como también aparece en la documentación oficial.

    constructor(props){
        super(props);
        this.state = {
           email: '',
           firstName: '',
        };
    }

Miguel Angel Morales Larriega

student•

Pienso que es código de mas y muy desfasado.

Todo eso se reemplazaría por:

state = { email: ' ', firstName: '' };

Encima me doy cuenta que dejas una coma demas en tu objeto.

Ahora ese objeto state se podría aun mejorar usando hooks: Primero lo importamos, justo en la parte donde importamos React import React, {useState} from 'react'; y lo usamos ya sea en un class component como en un functional component (ya que los hooks se crearon para escribir codigo de stado, de ciclo de vida y refs en stales functional components o functional components propiamente dichos), con hooks esto ya es una relidad.

const [state, setState] = usesState(' ');

podrías hacer hacer un state de cada uno, o simplemento hacer un state de un objeto con email y firstname:

//1era opcion: const [email, guardarEmail] = useState(' '); const [fistName, guardarFirstName] = usesState(' ');

//2da opcion: const [datos, gusardarDatos] = useState({ email: ' ', firstName: ' ' }); //como veras el state se inicializa como un objeto vacio.

Espero te haya servido. :)

Alejandro Neri

student•

Resumen

Para manejar los valores de nuestros inputs:

A nuestros inputs, en la función handleChange, le ponemos:

this.setState({
            [e.target.name]: e.target.value,
        })

para que cree una variable por cada input

2. A nuestros inputs les ponemos valor:

value={this.state.varName}

para que no se almacene 2 veces

3. Inicializamos una variable state al inicio de nuestro componente:

state = {
        varName: '',
        varName2: '',
    };

Opcionalmente, pero Recomendadamente, en nuestro método de handleSubmit, podemos manejar los datos, los cuales están almacenados en this.state

Jesús Heber Grajeda Barranco

student•

En esta clase vimos como Richard inicializa el state dentro de la clase sin necesidad de escribir un constructor, lo cual hizo que me preguntara el por qué, así que después de buscar pude encontrar una lectura acerca de en dónde inicializar el estado, la cual dejaré aquí

Jesús Heber Grajeda Barranco

student•

https://daveceddia.com/where-initialize-state-react/

Carlos Martinez

student•

Así es, eso también es gracias a una característica de ES7(EcmaScript7) la cual permite definir metodos y variables fuera del constructor, yo tuve una duda con eso y me la aclararon en stack overflow

Daniel Saldarriaga

student•

Hola, les comparto el mismo código, pero usando Hooks:

import React, {useState} from 'react';

const BadgeForm = () => {

    const [formData,setFormData] = useState({})

    const handleChange = (e)=>{
        setFormData({...formData,[e.target.name]:e.target.value})
    }

    const handleClick = (e)=>{
        console.log("button pressed");
    }

    const handleSubmit = (e)=>{
        e.preventDefault();
        console.log(formData)
    }

    return ( 
        <div>
            <h1>New Attendant</h1>
            <form onSubmit={handleSubmit}> 
                <div className="form-group">
                    <label>First Name</label>
                    <input value={formData.first_name} onChange={handleChange} className="form-control" type="text" name="first_name"></input>
                </div>

                <div className="form-group">
                    <label>Last Name</label>
                    <input value={formData.last_name} onChange={handleChange} className="form-control" type="text" name="last_name"></input>
                </div>

                <div className="form-group">
                    <label>Email</label>
                    <input value={formData.email} onChange={handleChange} className="form-control" type="email" name="email"></input>
                </div>

                <div className="form-group">
                    <label>Job Title</label>
                    <input value={formData.job_title} onChange={handleChange} className="form-control" type="text" name="job_title"></input>
                </div>

                <div className="form-group">
                    <label>Twitter</label>
                    <input value={formData.tiwtter} onChange={handleChange} className="form-control" type="text" name="twitter"></input>
                </div>


                <button  onClick={handleClick} className="btn btn-primary">Save</button>
            </form>
        </div>
     );
}
 
export default BadgeForm;

Jonathan Messina

student•

Gracias! estaba apunto de dejar el curso e irme a otro mas actualizado.

Chrystian Fabian Lozano Ramirez

student•

Sigo diciendo que ya es hora de actualizar el curso.

Pau Pregoni Juan

student•

Idem, comencé viendo React en su versión moderna que es puramente funcional. Aunque no viene mal conocer la sintaxis antigüa, supongo que en muchos lugares aún se trabaja de ésta manera verdad?

Leonardo Valencia

student•

soy nuevo en react, a que te refieres, dame un ejemplo o una fuente donde pueda ver algo mas actualizado

Martin Lazzeri

student•

hay alguna forma de ver la memoria que se ocupa al no controlar los inputs y setear el state (datos duplicados) y al controlar los inputs (única copia de datos)?

Oscar Miguel Fabian Bernal

student•

Si por alli alguien no entendio la magia de :

Aqui les dejo un link, https://stackoverflow.com/questions/11508463/javascript-set-object-key-by-variable

Es brutal la elegancia de codigo al usar esto!! Buena @esparragus !!

Carlos Martinez

student•

es un poco parecido a la destructuración aunque un poco diferente, gracias por el link

David Antonio Garcia Saaib

student•

para declarar una variable como key del set state es necesario escribirla entre corchetes cuadrados

handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };```

Wilbert Belandria

student•

Hahahah Gusta los pines!!! en cada video.

Alexis Antonio Moraga Gallardo

student•

Hola, les dejo un Repositorio con mi avance del curso y notas personales =)

Nicolás Danilo Peña Fuentes

student•

Que agradable sujeto

Isaias Chávez

student•

Me agrada mucho este profesor.

Freddy Córdova Arana

student•

Pienso lo mismo :)

lesier gg

student•

Necesito pegar esto en mi cuarto: -Copiar -Pegar -Reemplazar -Repetir

Nicolas Miranda

student•

el complemento o plugin ya no funciona como se muestra en el ejemplo

Andrés Campuzano Garzón

student•

React DevTools is available as an extension for Chrome and Firefox. If you have already installed the extension, it should update automatically within the next couple of hours.

If you use the standalone shell (e.g. in React Native or Safari), you can install the new version from NPM:

npm install -g react-devtools@^4

Fuente

Manejo de estado

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión