React manejo de estado con objetos

#javascript #react

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

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

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