Problem when trying to change input value

Question

Hi all I have following code:

    const BasicInformation = () => {
    const { Panel } = Collapse;

    const dataFromBackend = [
    { id: 2, depositeAmt: '500' },
    { id: 3, depositeAmt: '1500' },
    ];

    const totalCount = dataFromBackend
    .map((item) => item.depositeAmt)
    .reduce((prev, curr) => +prev + +curr, 0);

    const onSubmit = (data) => {
    console.log(data);
    };
    return (
    <Form onFinish={(e) => onSubmit(e)}>
      <Form.List name="users" initialValue={dataFromBackend}>
        {(fields, { add }) => {
          return (
            <>
              total Deposit Amount: $ {totalCount}
              <Button
                onClick={() => {
                  add();
                }}
                block
              >
                Add
              </Button>
              {fields.map((field, i) => (
                <Collapse
                  key={i}
                  accordion
                >
                  <Panel header="Amount : ">
                    <Form.Item
                      name={[field.name, 'depositeAmt']}
                      label="Amount"
                      fieldKey={[field.fieldKey, 'depositeAmt']}
                    >
                      <Input />
                    </Form.Item>
                  </Panel>
                </Collapse>
              ))}
            </>
          );
        }}
      </Form.List>
      <Button type="primary" htmlType="submit">
        send
      </Button>
      </Form>
    );
   };

I am receiving some date from backend dataFromBackend and reducing to get count of all deposit Amount.

Also in collapses I have deposit label. The idea is when user changing deposit field value the total Deposit Amount: and <Panel header="Amount : "> should also dynamically changed.

I try this but it not help me to resolve it:

     <Form.Item
       name={[field.name, 'depositeAmt']}
       label="Amount"
       fieldKey={[field.fieldKey, 'depositeAmt']}
       >
        <Input onChange={(e)=>totalCount + e} />
      </Form.Item>

Please help me to fix this problem, thank you very much.

Answer 1

You store the dataFromBackend in variable thats the issue.! You need to store dataFromBackend in state and on input (handleInputChange) change you need to update this array !

On Add btn click you need to push new object in dataFromBackend array

Show this code it's help you !

const BasicInformation = () => {
  const { Panel } = Collapse;

  const [dataFromBackend, setDataFromBackend] = useState([
    { id: 2, depositeAmt: '500' },
    { id: 3, depositeAmt: '1500' },
  ]);

  const [totalCount, setTotalCount] = useState(
    dataFromBackend
      .map((item) => item.depositeAmt)
      .reduce((prev, curr) => +prev + +curr, 0)
  );

  const onSubmit = (data) => {
    console.log(data);
  };

  const handleInputChange = (index, value) => {
    let arr = [...dataFromBackend];
    arr[index].depositeAmt = value;
    setDataFromBackend(arr);
  };

  useEffect(() => {
    let count = dataFromBackend
      .map((item) => item.depositeAmt)
      .reduce((prev, curr) => +prev + +curr, 0);

    setTotalCount(count);
  }, [dataFromBackend]);

  const addNewField = () => {
    let id = new Date().getTime();
   setDataFromBackend(oldArray => [...oldArray, { id: id, depositeAmt: 0 }]);
  };

  return (
    <Form onFinish={(e) => onSubmit(e)}>
      <Form.List name="users" initialValue={dataFromBackend}>
        {(fields, { add }) => {
          return (
            <>
              total Deposit Amount: $ {totalCount}
              <Button
                type="dashed"
                onClick={() => {
                  add();
                  addNewField();
                }}
                block
              >
                Add
              </Button>
              {fields.map((field, i) => (
                <Collapse
                  key={i}
                  accordion
                  style={{
                    background: 'rgba(25, 103, 210, 0.08)',
                    border: 'none',
                  }}
                >
                  <Panel style={{ border: 'none' }} header="Amount :">
                    <Form.Item
                      name={[field.name, 'depositeAmt']}
                      label="Amount"
                      fieldKey={[field.fieldKey, 'depositeAmt']}
                    >
                      <Input
                        type="number"
                        onChange={(e) => handleInputChange(i, e.target.value)}
                      />
                    </Form.Item>
                  </Panel>
                </Collapse>
              ))}
            </>
          );
        }}
      </Form.List>
      <Button type="primary" htmlType="submit">
        send
      </Button>
    </Form>
  );
};

ReactDOM.render(<BasicInformation />, document.getElementById('container'));