useRef only gets last values from mapped form antd Reactjs

Viewed 29

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

0 Answers
Related