Object dot-notation does not work here as value is undefined
<Input key={i} value={inputs.e} name={e} onNameChange={handleChange} />
this works
<Input key={i} value={inputs[e]} name={e} onNameChange={handleChange} />
this is signifying to me that initializing state like this may not be the best idea?
function _Login() {
const inputNames = ["firstName", "lastName"];
const [inputs, setInputs] = React.useState(
inputNames
.map((e) => ({ [e]: "" }))
.reduce((accumulator, current) => ({ ...accumulator, ...current }), {})
);
const handleChange = (value: object) => setInputs({ ...inputs, ...value });
return (
<form>
{inputNames.map((e, i) => (
<Input key={i} value={inputs[e]} name={e} onNameChange={handleChange} />
))}
</form>
);
}
the reduce is just reducing an array of objects to one object
What is a good explanation for all of this?
