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 Representativeació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: '[email protected]'
  });

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

자세한 내용 참조:

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

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

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