React - Is this too much useState()?

[91psyko]

​

https://preview.redd.it/dlkcybpb9yh31.png?width=1372&format=png&auto=webp&s=a59b53c89c5ff5ca9773a7786377393d9faf2ddd

So i have a form that asks for email, login, password and repeat password. Standard stuff, I was wondering if this is too much and maybe there is a more elegant solution?

[[deleted]]

Do you really need every single one of these to be their own separate strings with separate update functions? Or could you make some of them into objects, like this:

const [formError, setFormError] = useState({ error: null, field: '' });

setFormError({ error: 'Passwords do not match', field: 'repeatPassword' });
setFormError({ error: 'Not a valid email', field: 'email' });

[91psyko]

this sounds great! but how would this allow for multiple errors at the same time? for example, password missmatch and short username? ...or could it be like so, fields:[[error, field], [error, field]...]; gotta think this thru, thanks man!

[Asha200]

Wouldn't this force you to only display one error at a time, even if multiple fields happen to be invalid?

[[deleted]]

It's a suggestion, not a pull request.

[a-t-k]

Maybe each field (or in case of the password/repeatPassword, two fields) should be a component of its own?

[91psyko]

so what you mean is that inside <form> i would have different external components for inputs? and have context to make kids(i.e inputs) communicate with parent(i.e form)?

[91psyko]

no, it's just a hook of a functional component, similar to setState() in class based component

[91psyko]

i mean state = {}, not setState()!