Add name and email to a state dynamically - reactjs

Question

I have an event app. Where a user comes add number of people. Then based on the number of people I show input fields for name and email. I am using a for loop to display fields for each used based on number of people.
<input
type="email"
name={`email`}
required
className="form-control"
placeholder="Enter"
onChange={(e) => {
onChange(e, i);
}}
/>
<input
type="text"
name={`firstname`}
required
className="form-control"
placeholder="Enter"
onChange={(e) => {
onChange(e, i);
}}
/>
I have a state:
const [fields, setFields] = useState([{ email: "", firstname: "" }]);
I am trying to update the state dynamically for each user. I am doing something like this:
const onChange = (e, index) => {
const updatedArray = [...fields];
updatedArray.push(([e.currentTarget.name] = e.currentTarget.value));
setFields(updatedArray);
};
Code isn't working. I am not getting a separate object for each user in state array. I am stuck and any help would be appreciated.

Answer 1

the onChange handler should be something like this:
const onChange = (e, index) => {
const inputName = e.currentTarget.name;
const inputValue = e.currentTarget.value;
setFields(prevFields =>
prevFields.map((pF, i) =>
i === index ? { ...pF, [inputName]: inputValue } : pF
)
);
};
functional update is recommended as the new state depends on the old state and the problem with your snippet is you're not using the index to figure out which object to update and the syntax for updating the property in that object is also incorrect.
the two inputs also need a value prop:
<input
type="email"
name={`email`}
required
className="form-control"
placeholder="Enter"
value={field.email}
onChange={(e) => {
onChange(e, i);
}}
/>
<input
type="text"
name={`firstname`}
required
className="form-control"
placeholder="Enter"
value={field.firstname}
onChange={(e) => {
onChange(e, i);
}}
/>
Update:
You need additional code for adding more users, if you want to add a user when a button is clicked:
const addUser = () => {
setFields(prevFields => [
...prevFields,
{
email: "",
firstname: ""
}
]);
};
<button onClick={addUser}>Add User</button>
Here's a React StackBlitz implementing the above solutions