useRef only gets last values from mapped form antd Reactjs - reactjs

Question

I get a bunch of references from an API, I want to insert each Reference with its quantity, I am using antd form useRef
and I get undefined values
const formRef =useRef();
const submitFunction= (values) => {
formRef.current.validateFields().then((values) => {
console.log("Values:", values);
});
};
{reference.map((e, index) => (
<Form ref={formRef}
initialValues={{
["Ref"]: e.reference
}}>
<div>
<Row style={{ backgroundColor: "darkcyan" }} gutter={8}>
<Col span={5}>
<Form.Item label="Ref" name="Ref" labelCol={{ span: 6 }}>
<Input key={index} defaultValue={e.reference} />
</Form.Item>
</Col>
<Col span={8}>
<Form.Item name="quantity">
<InputNumber key={index} />
</Form.Item>
</Col>
<Col span={8}>
<Form.Item>
<Button onClick={() => submitFunction()}>
click me
</Button>
</Form.Item>
</Col>
</Row>
</div>
</Form>
))}
referencesList

Answer 1

Maybe it is too late to answer the question. It seems that because you have a list of Form component and formRef is connected to each form, logically the reference value of the forms are replaced one by one in the formRef till it gets to the last one. If you want to prevent that you can initialize formRef as an empty array like this:
const formRef = useRef([]);
And define ref prop of the Form component like so:
ref={el => {
if (el) formRef.current[index] = el
}}
finally change submitFunction :
const submitFunction = (value) => {
formRef.current.map(form => {
form.validateFields().then((values) => {
console.log("Values:", values);
});
})
};