Save values in a form in reactjs [duplicate] - reactjs

Question

This question already has answers here:
Save data in a form using reactjs
(2 answers)
Closed 2 years ago.
I have an application where user can submit data using a form. I'm using dynamic form where user can set how many forms he wants.
<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
<Form.List name="users">
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) =>
!fieldsOnEdit.includes(index) ? (
<Space
key={field.key}
style={{ display: "flex", marginBottom: 8 }}
align="start"
>
<Form.Item
{...field}
name={[field.name, "first"]}
fieldKey={[field.fieldKey, "first"]}
rules={[
{ required: true, message: "Missing first name" }
]}
>
<Input placeholder="First Name" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit{setFieldOnEdit(index)}
</Button>
</Form.Item>
</Space>
) : (
<Edit value={formVal} keyForm={index} />
)
)}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
block
>
<PlusOutlined /> Add field
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
</Form>
When i click on submit button appears <Edit value={formVal} keyForm={index} /> component where should appears corresponding value from the form. Now there is an issue:
when i save for example 2 forms, the second value overrides previous and so on.
I made this: value.users[value.users.length - 1].first, trying to set for every form corresponding value but it does not work.
Question: How to solve the issue, and when i will save a form to display the corresponding value in component?
demo: https://codesandbox.io/s/modest-austin-kqztw?file=/index.js:698-2310

Answer 1

The value is not overwritten, you are rendering always the same item.
You have the index of wanted item in keyFrom prop in your Edit component, just use it:
export const Edit = ({ value, keyForm }) => {
return (
<div>
edit mode
<p>value: {value.users[keyForm].first}</p>
</div>
);
};