No tienes acceso a esta clase

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

Curso de React.js 2019

Curso de React.js 2019

Richard Kaufman

Richard Kaufman

Manejo de estado

15/37
Recursos

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.

Aportes 125

Preguntas 42

Ordenar por:

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

Llamo mi atenci贸n el siguiente error:

Palabras m谩s, palabras menos el error dice:

鈥淯n 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

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.

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)

馃憢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

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;

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: "",
  }

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:

<input name="firstName" type="text" className="form-control" onChange={this.handleChange.bind(this)}/>

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: '',
        };
    }

Resumen

Para manejar los valores de nuestros inputs:

  1. 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
  1. A nuestros inputs les ponemos valor:
value={this.state.varName}
para que no se almacene 2 veces
  1. 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

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铆

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;

Sigo diciendo que ya es hora de actualizar el curso.

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

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

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

Hahahah Gusta los pines!!! en cada video.

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

Me agrada mucho este profesor.

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

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

Aun no entiendo muy bien por que sale ese warning

Muy bien explicado de como funciona el estado en React, es espectacular los detalles que cuenta el profesor y el porque pasa y como se debe de hacer para solucionar dichos problemas

  • 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.

Apuntes de la clase:

Espero les sriva鈥

Que ir贸nico que en el curso de react haya tantos problemas con la sincronizaci贸n entre la parte de discuciones y los videos. Estoy viendo un video y la parte de discuciones e incluso el titulo pertenecen a otro.

teacher 鈥 seria bueno q menciones , cuales son las teclas q usas para x ejemplo los comentarios o para organizar 鈥 los shortcuts de vs code鈥!!
Gracias!

Richard excelente clase, la verdad explicas de una manera muy sencilla lo del manejo del estado, cuando trate de real izarlo apara un proyecto en el bootcam en el que estoy me tarde mas de una semana y sin comprender lo tan bien como hasta ahora.

Solucion茅 el error en consola al editar los campos de texto, modificando lo siguiente en el class BadgeForm

state = {
    firstName: "",
    lastName: "",
    heroClass: "",
    faction: "",
    whyIsHere: ""
  }; ```

Saludos
<h1>Manejo de estado</h1>

La manera en la que maneja un componente su propia informaci贸n es mediante la generaci贸n del estado, mismo que un componente de tipo clase lo maneja en this.state y los componentes de tipo funci贸n mediante el hook useState.

Los estados son variables que pueden acceder el componente, mismas que se van modificando conforme lo necesite,

Un uso muy com煤n es modificar el estado local para pasar props a componentes hijos de manera que 茅stos puedan renderizar la informaci贸n que se le pase, aunque puedes realizar cualquier l贸gica necesaria como si fuera una variable local

Una limitaci贸n del estado es que no se puede asignar valores de manera directa, necesitas hacer uso de la funci贸n del componente (o del hook useState) setState, mismo que guarda en el estado el objeto que se le pase como argumento this.setState({newState: state})

class Button extends React.Component {
  state = { count: 0 }

  handleClick = () => (
     this.setState({ count: this.state.count + 1 })
  );

  render() {
    const { count } = this.state;

    return (
      <div>
        <h1>Manzanas: {count}</h1>
        <button onClick{this.handleClick}>Sumar</button>
      </div>
    );
  }
}

por ahora creo que el contenido est谩 dado mas conciso que el curso hecho por Leonidas, eso hace que tenga una curva de aprendizaje mas apropiada para reci茅n iniciados en react, sin tanto babel, webpack, patrones y buenas practicas, etc鈥 que son mas 鈥渄ecorados鈥 en t茅rminos te贸ricos (porque en la practica son obligatorios se podr铆a decir)

Por si alguien lo esta haciendo con hooks

    const [valuesForm, setValuesForm] = useState({
        firstName: '',
        lastName: '',
        jobTitle: '',
        email: '',
        twitter: '',
    })

    const { firstName, lastName, jobTitle, email, twitter } = valuesForm

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

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

BadgeFrom

import React, { Component } from 'react';

class BadgeForm extends Component {
  state = {
    firstName: '',
    lastName: '',
    email: '',
    jobTitle: '',
    twitter: ''
  }
  handleChange = e => {
    // console.log({
    //  value: e.target.value,
    //  name: e.target.name
    // })
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleClick = e => {
    console.log("click")
  }

  handleSubmit = e => {
    e.preventDefault()
    console.log("Form")
    console.log(this.state)
  }
  
  render() {
    return (
      <div>
        <h1>Nuevo asistente</h1>
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label>Nombre</label>
            <input 
              onChange={this.handleChange} 
              className="form-control" 
              type="text" 
              name="firstName" 
              value={this.state.firstName}
            />
          </div>

          <div className="form-group">
            <label>Apellido</label>
            <input 
              onChange={this.handleChange} 
              className="form-control" 
              type="text" 
              name="lastName"
              value={this.state.lastName}
            />
          </div>

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

          <div className="form-group">
            <label>Ocupaci贸n</label>
            <input 
              onChange={this.handleChange} 
              className="form-control" 
              type="text" 
              name="jobTitle"
              value={this.state.jobTitle}
            />
          </div>

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

          <button onClick={this.handleClick} className="btn btn-primary">Guardar</button>
        </form>
      </div>
    )
  }
}

export default BadgeForm;

Que buena explicacion de React excelente profesor鈥uy practico

  • Manejo de Estado.
    • 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.
    • 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. como se hace eso al imput se le pasa el valor example:
	<input
              onChange={this.handleChange}
              className="form-control"
              type="text"
              name="lastName"
              value={this.state.lastName}
           />

El estado siempre se debe inicializar

Entonces es importante recordar que al manejar estados con inputs es recomendable asociarlo al estado mediante:

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

Este ser铆a mi componente de login con su respectivo estado agregue error para validaci贸n del usuario si escribe un campo con requerimientos faltantes.

Estoy flipando D:

Excelente

Me ha gustado mucho est茅 curso, he aprendido mucho!!

Alguien sabe a qu茅 se debe el warning que aparece en consola?

Uno de los mejores profesores de platzi , soy arquitecto angular y ionic y no era muy fan de react pero este profesor esta 5 estrellas

Esta informacion se esta guardando en dos sitios, cada input guarda su propio valor, y ademas le esta diciendo al setState guarda este valor. No queremos eso. Para eso tenemos que cambiar nuestros inputs de no controlados a controlados. Agregando el props de value

El profesor explica muy bien, lo 煤nioc el error de la consola, pero se soluciona inicializando todo los valores de los input como vacios.

Una peque帽a correcci贸n que har谩 una gran diferencia en los usuarios con discapacidad visual:
A la hora de utilizar el tag <label> deber铆amos insertar el input como un elemento hijo de este (creo que es la forma m谩s pr谩ctica en React), de esta forma hacemos que los lectores de pantalla lean el label en cuesti贸n y la persona que este utilizando su web pueda saber de que trata en input en cuesti贸n.
Ejemplo:

<div className="form-group">
          <label>
            First name
            <input
              onChange={handleChange}
              className="form-control"
              type="text"
              name="firstName"
              value={formData.firstName}
            />
          </label>
        </div>```

Los invito a activar el voice over en sus equipos y escuchar  la diferencia (command + f5 en mac)

Hola profe: tengo una pregunta
me confunde la manera en que se debe inicializar 鈥渟tate = {}鈥 y no "this.state.firstName = 鈥樷 "
gracias

Hay una forma que los componentes pueden producir su propia informacion y guardarla, para consumirla o para pasarla a otros componentes atravez de sus props. La clave esta en que la informacion del estado pase en una sola direccion y otros props la pueden consumir y utilizar pero no cambiar.

Para guardar la informacion, utilizamos una funcion de la clase component, donde hacemos un objeto con las opcionnes que queremos guardar.

Esto seria:

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

El problema es que ahora cada input que guardemos sera de nombre fristname, para poder guardarlo en diferentes espacios. Para poder hacer esto haremos sera mandarle un arreglo donde le diremos sque se guarde en cada variable dependiendo de su nombre con:

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

El problema de esta forma es que la informacion termina guardada en dos sitios y eso cuando una aplicacion crece empieza a representar un problema. Porque cada input empieza a guardar su propio valor y aparte le esta diciendo a setState que tambien lo haga, esto no es ideal. Es mejor tener una sola fuente de informacion.

Para poder arreglar esto, es mejor cambiar los inputs a NO CONTROLADOS a CONTROLADOS. Para poder hacer esto, tenemos que pasarle un PROP adicional que es el 鈥榲alue鈥. Tenemos que leer el estado de la siguiente forma:

value={this.state.nombreInput}

Pero esto nos ocacionara un error, donde nos dice que estos valores de STATE no estan inicializados, para hacerlo en cualquier linea o preferiblemente la primera, tenemos que poner:

state ={};

Ahora al hacer el submite no leeiamos los valores, ya podemos hacerlo con un simple console.log e imprimiendo el estado.

C贸mo asignar nombres din谩micos a las propiedades.

Cuando se tiene que imprimir por consola muchos datos y se hace un poco dificil su lectura pueden utilizar ** console.table () **, el cual va a agrupar todos los elementos y mostrarlos mucho mejor.

Ejemplo:

Por si quieren que su editor les acomode el codigo automaticamente he dejado un peque帽o tutorial para hacerlo con prettier

se recomienda que todos los valores de las propiedades del objeto state siempre sean string?

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

Encontr茅 esta hermosura de definici贸n en el foro:

Estado

Primero hay que entender que los estados pertenecen a los componentes.

El estado es similar a las props. Pero 茅ste es privado.

Privado significa que un componente podr谩 modificar su estado pero no el de otro componente.
Solo disponible para su componente.

Tanto los state como los props, son objetos planos en JavaScript. Pero se diferencian en algo:

  • Los props se pasan al componente como cuando pasamos par谩metros a una funci贸n.
  • El state no se pasa, este se administra dentro del componente. Como las variables declaradas dentro de una funci贸n. Este vive dentro del componente desde un inicio.
  • El state tiene un valor predeterminado cuando se monta el componente.

Luego sufre cambios con el tiempo, normalmente con eventos que activa el usuario. Entonces, se podr铆a decir que el estado es una representaci贸n de su componente porque contiene los datos que representan un componente.

Cu谩ndo un componente tendr谩 estado y cuando no?

Tendr谩 estado cuando el componente recibe informaci贸n para cambiar alg煤n elemento dentro de el.
Cuando el componente es prestacional, no necesitar铆a estado.

Fuente

Si alguien noto el error que arroja en la consola, se refiera que se esta tratando de controlar un elemento con un valor que aun no existe.
Si bien inicializamos el state como un objeto vaci贸, pero las propiedades del estado aun no.
La inicializaci贸n pudiera ser de esta forma.

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

Depronto a alguien le pasa como a mi, que el state no se esta cargando mas que el jobTitle como en el ejemplo y a su vez no me es posible modificar el contenido del jobTitle, cada vez que lo cambio se restablece por defecto al que se le definio en el ejemplo, sin embargo a el profesor si le permite hacer el cambio luego de establecido

C贸mo setear nombre de propiedad din谩micamente

No se si ser谩 por la actualizaci贸n de React que ya no es igual a lo que se muestra en este video, pero cuando escribo en el formulario, como lo hace el profesor en el minuto 2:33 no veo ning煤n 鈥渟tate鈥 actu谩lizandose. Alguien sabe si en la actualidad este ejemplo funciona igual? Saludos.

驴Cu谩l es la diferencia entre state y props?
props (abreviatura de 鈥漰roperties鈥) y state son objetos planos de JavaScript. Mientras ambos contienen informaci贸n que influye en el resultado del render, son diferentes debido a una importante raz贸n: props se pasa al componente (similar a los par谩metros de una funci贸n) mientras que state se administra dentro del componente (similar a las variables declaradas dentro de una funci贸n).

Al utilizar componentes como funciones en lugar de clases, se utilizan los "React Hooks", que en cierto modo resultan ser m谩s sencillos de manejar que el estado en una clase ya que puedes separar diferentes valores en diferentes variables. Las funciones componente y los hooks lucen as铆: ''' function Component(props) { [firstname, setFirstname] = React.useState(); [lastname, setLastname] = React.useState(); return ( <form> <input value={firstname} onChange={e => setFirstname(e.target.value)} /> <input value={lastname} onChange={e => setLastname(e.target.value)} /> </form> ); } '''

Creo que podemos mejorarlo haciendo un componente de input para nuestro formulario y lo reutilizamos, asi nos queda mas legible el codigo del form

a alguien mas le pasa que hay veces que cuando terminas la clase y esperas los 3 segundo para ir a la clase siguiente, el contador empieza a arrojar valores negativos infinitamente y nunca avanza a la siguiente clase ???

A cerca de loc omponentes controlados que menciona:

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component 鈥渃ontrols鈥 it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a 鈥渄umb component鈥.

A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

//Todo eso ser铆a m谩s f谩cil con spread operator (los tres puntos)

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

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

el warning que apareci贸 en el final, como lo podemos fixear?

Excelente explicaci贸n

Excelente clase!!!

a seguir aprendiendo!

Que genial tuvo esta clase!!

![](

Mi c贸digo hasta ahora:

import React, { useState } from 'react';

const BadgeForm = () => {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [email, setEmail] = useState('');
    const [jobTitle, setJobTitle] = useState('');
    const [twitter, setTwitter] = useState('');

    return(
        <div>
            <h1>New Attendant</h1>
            <form>
                <div className="form-group">
                    <label>First Name</label>
                    <input
                        onChange={(e) => setFirstName(e.target.value)}
                        className="form-control"
                        type="text"
                        name="firstName"
                        value={firstName}
                    />
                </div>
                <div className="form-group">
                    <label>Last Name</label>
                    <input
                        onChange={(e) => setLastName(e.target.value)}
                        className="form-control"
                        type="text"
                        name="lastName"
                        value={lastName}
                    />
                </div>
                <div className="form-group">
                    <label>Email</label>
                    <input
                        onChange={(e) => setEmail(e.target.value)}
                        className="form-control"
                        type="email"
                        name="email"
                        value={email}    
                    />
                </div>
                <div className="form-group">
                    <label>Job Title</label>
                    <input
                        onChange={(e) => setJobTitle(e.target.value)}
                        className="form-control"
                        type="text"
                        name="jobTitle"
                        value={jobTitle}   
                    />
                </div>
                <div className="form-group">
                    <label>Twitter</label>
                    <input
                        onChange={(e) => setTwitter(e.target.value)}
                        className="form-control"
                        type="text"
                        name="twitter"
                        value={twitter}
                    />
                </div>
                <button onClick={(e) => {e.preventDefault(); console.log('Button was clicked')}} className="btn btn-primary">Save</button>
            </form>
        </div>
    )
}

export default BadgeForm;

As铆 se ver铆a un ejemplo utilizando el hook useState en un componente funcional.
.

import React, {useState} from 'react'

const Button = (props) => {
	const [count, setCount] = useState(0)
  handleClick = (event) => {
		event.preventDefault()
    setCount(count+1)
  }
  return (
    <div>
			<h1>Manzanas: {count}</h1>
			<button onClick={handleClick}>Sumar</button>
		</div>
  );
}

.
Donde:

  • Desestructuramos las variables count y setCount desde un estado inicializado con 0.
  • count: ser谩 utilizado en nuestra aplicaci贸n como el estado local de s贸lo lectura
  • setCount: es el m茅todo con el que podremos asignar nuestro estado, podemos asignarlo con cualquier cosa, pero para este caso utilizaremos enteros.
  • useState: hook para manejar el evento.
  • onClick: Es el manejador del evento click
  • handleClick: Es el callback donde manejamos la l贸gica del evento

No entiendo que es lo que cambia al final agregando el atributo value a cada uno de los campos del formulario, si ya con el setState se asignaba el valor automaticamente a medida que uno iba escribiendo.

Para pasar de Componentes no Controlados a Componentes Controlados se debe usar value en cada uno de los inputs.

Porque ReactJS tiene que almacenar en 鈥渟tate鈥 el valor de los inputs, cuando, en JQuery con solo usar $(input).val(); obtenias el valor del input direcatamente sin almacenar en ningun lado previamente.

Por qu茅 no es ideal tener dos veces la info?

Esto de los estados debe ser la piedra angular de react

Seg煤n lo que investigu茅 y entend铆. Lo que queremos conseguir al controlar el estado del input es que no se repita el valor del mencionado en el virtual DOM de react y en HTML plano. Queremos que react sea la 煤nica fuente de la verdad. Por eso a帽adimos la propiedad value al input. Como recordaremos, en HTML plano, 茅sta propiedad nos permite darle un valor predeterminado al input, y lo que hacemos aqu铆 es indicarle que el valor predeterminado ser谩 la propiedad del objeto state que le asignemos a un input.

dicha propiedad puede ser name c贸mo el ejemplo de arriba.
Recordemos tambi茅n que para que Ract no caiga en un error de no saber si el componente es controlado o no controlado tenemos que declarar el objeto state con las propiedades equivalentes a los nombres de los inputs c贸mo strings vac铆os.
Los cuales van a ser llenados al momento que se active el evento onChange.

Fuente:https://www.youtube.com/watch?v=7FQS6_fOgR8

La manera correcta de agregar el state es en el constructor(), ya que es ahi en donde se va a almacenar en memoria toda la informacion que necesita el componente para vivir. Eso se hace de la siguiente manera:

class BadgeForm extends React.Component{
  constructor(props){
    super(props)
    this.state = {value: ""}

    this.handleChange.bind(this)
    this.handleSubmit.bind(this)
  }

  handleChange = e => {
    @code
  }

  handleSubmit = e => {
    @code
  }

  render(){
    @code
  }
}

https://reactjs.org/docs/forms.html#controlled-components

Tratando de encontrar un s铆mil:

Props: es el genotipo.

State: es el Fenotipo.

馃ぃ

Props VS State

鈥淓n un componente de React, las props son variables que le pasa su componente principal. Por otro lado, el estado sigue siendo variable, pero directamente inicializado y administrado por el componente鈥

  • Las propiedades o props son externas al componente, se configuran y se modifican desde el padre, y nunca desde el mismo componente.

  • El **estado o state **es interno del componente, se configuran en la constructor y se modifican desde el mismo componente, usando this.setState(). Recuerda que no debemos modificar los valores del estado directamente.

/ Fuente:

Eventos Enlazados

Se me ocurri贸 hacer una peque帽a ilustraci贸n en Figma para hacerlo un poco m谩s descriptivo, espero a alguien m谩s le funcione.
A mi me ayud贸 a comprender de manera gr谩fica el funcionamiento de los Eventos Enlazados.
鉅鉅鉅
Greetings!
鉅鉅鉅

Les dejo algunos puntos clave que me llevo de esta clase:

//inicializar el estado con un objeto vac铆o al inicio del componente
state = {}

//funci贸n serState
this.setState({
      [e.target.name]: e.target.value
    })


//inputs
//state.value es lo que hace que el input tenga estado controlado
<div className="form-group">
          <label>First Name</label>
          <input 
							onChange={this.handleChange} 
							className="form-control" 
							type="text" 
							name="firstName" 
							value={this.state.firstName}
					/>
        </div>

Error, inicializar State

setState

la herramienta de react devtools a cambiado un poco pero mantiene las mismas caracteristicas

si ves esto despu茅s del 7 de mayo del 2021: react actualizo sus developer tools y ahora los promps y states estan en la pesta帽a components-nombre del componente 馃槂

Vamos muy bien Richard.

Hola, consulta t茅cnica. Esto del this.state por supuesto que est谩 bueno saberlo por si te encontr谩s con eso, pero con los hooks ya pas贸 a la historia? o hay algo que this.state pueda hacer que los hooks no?
Gracias People()!

Para solucionar tambien el error que menciona @ErikOchoa tambi茅n pueden usar declarar las funciones en el constructor.

Un ejemplo

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

    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

Genial, no sab铆a que se pod铆an guardar datos.

Wuuaooo esto es muy interesante鈥 me tiene curiosa. 馃槈

buenas clases

C贸mo corregir el warning del final ? Me fastidia.

Dentro de VSCode en el men煤 Help 鈥 Keyboard Shortcuts Reference bajas el listado completo

Oigan, puedo pedir algo? me gustaria tener un plugin para correr esto a x3 velocidad (la competencia lo tiene). Ayudaria mucho para repasar

Excelente

Genial!! me toma el triple de tiempo este curso clase a clase seguir y practicar, pero vale la pena!

me esta gustando como esta quedando esta pagina

Woow

Con los estados todo queda mas controlado!

Hola chicos, pregunta: Solo me aparece en console el evento de 鈥淏utton was clicked鈥 pero no me aparece el de 鈥淔orm was submitted鈥 ya me asesore de revisar bien el codigo y tiene su respectivo onSubmit={this.handleSubmit}, alguno de ustedes me podra colaborar en decirme que puede suceder?. Gracias.

El error que le sale al maestro en consola

de que es? no es nada relevante?

a mi tambien me sale

Hola amigos, para los que quieren saber m谩s sobre la Genial asignaci贸n que realizarlo profe this.setState({[e.target.name]:e.target.value}), esto es posible gracias a ES6 Computed Property name en los objetos literales.