functional component react js, what is the standard way to handle multiple input values?

Question

Consider a simple create account form

const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

etc

should you have to make 4 functions calls to do this: (e) => setFirstName(event.target.value)? Or is there a simpler way?

Is there a disadvantage for doing it like this?

const [state, setState] = useState({firstName: '', lastName: '', email: '', password: ''})

function handleChange(event) {
    setState((prevState) => {...prevState, [event.target.name]: event.target.value})
}

Answer 1

If you have multiple inputs then you should use your second method there is nothing wrong with using it. It makes your work easier.

And if you take four function calls to do this then it'll be just more lines of code in your component. It is not an optimized solution.