DEV Community

Cover image for React manejo de estado con objetos
kevingo710
kevingo710

Posted on • Updated on

React manejo de estado con objetos

El manejo de estados en React es muy flexible pues permite manejar cualquier tipo de valor de Javascript pero no solo los de uso frecuente como son strings, booleans, numbers los cuales son inmutables es decir no se cambian en sentido profundo lo que se hace es una nueva representación para reemplazar un valor

const [name, setName] = useState("Kevin");

const [number, setNumber] = useState(7);

const [adult, setAdult] = useState(false);
Enter fullscreen mode Exit fullscreen mode

Pero en ocasiones podemos tener más 5 estados que hacen referencia a una misma cosa en este caso puede ser persona y puede llegar a tener más atributos por lo tanto podemos manejarlo como un objeto, así se podría ver de una forma más sencilla que el ejemplo anterior multiplicado por 5 de modo que se puede quedar así


const [persona, setPersona] = useState({name: "", number: null, adult: null});

Enter fullscreen mode Exit fullscreen mode

Manejo más simple

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com'
  });

  function handleChange(e) {
    setPerson({
      ...person,
      [e.target.name]: e.target.value
    });
  }

  return (
    <>
      <label>
        First name:
        <input
          name="firstName"
          value={person.firstName}
          onChange={handleChange}
        />
      </label>
      <label>
        Last name:
        <input
          name="lastName"
          value={person.lastName}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          name="email"
          value={person.email}
          onChange={handleChange}
        />
      </label>
      <p>
        {person.firstName}{' '}
        {person.lastName}{' '}
        ({person.email})
      </p>
    </>
  );
}

Enter fullscreen mode Exit fullscreen mode

Referencias para profundizar:

https://beta.reactjs.org/learn/updating-objects-in-state

https://blog.logrocket.com/using-react-usestate-object/

https://daveceddia.com/usestate-hook-examples/

Top comments (0)