Form not working in ionic react

I am trying to use form with ionic react…but on submit it is only sending the initial values, not changing…the values, what to do in this scenario…please help me regarding this…here is my code…

also when I am using onIonChange , unhandled event error comes in debug console…


import {
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonInput,
  IonItem,
  IonLabel,
  IonMenuButton,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/react";
import axios from "axios";
import React, { useState } from "react";
import { useParams } from "react-router";

function CreateTransaction() {
  const id = useParams();
  const acc_id = parseInt(id.id);
  const accessJWT = localStorage.getItem("accessJWT");
  const [data, setData] = useState({
    acc_id: acc_id,
    transaction_value: 0,
    transaction_type: "",
    transaction_time: "",
    status: "",
    grace_period: 2,
    remarks: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setData({ [name]: value });
    console.log(data);
  };
  const handleSubmit = async (e) => {
    e.preventDefault();
    await axios
      .post(`/account/${acc_id}/transactions`, {
        data: data,
        headers: {
          Authorization: "Bearer " + accessJWT,
        },
      })
      .then((response) => {
        console.log(response);
        // setData(data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <IonPage>
      <IonHeader className="transaction_header">
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle>Create Transaction</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="login_content ion-padding" fullscreen>
        <form onSubmit={handleSubmit}>
          <IonItem>
            <IonLabel position="stacked">Account ID</IonLabel>
            <IonInput
              type="number"
              name="acc_id"
              value={data.acc_id}
              onChange={handleChange}
            />
          </IonItem>

          <IonItem>
            <IonLabel position="stacked">Transaction Value</IonLabel>
            <IonInput
              type="number"
              name="transaction_value"
              value={data.transaction_value}
              onChange={handleChange}
            />
          </IonItem>

          <IonItem>
            <IonLabel position="stacked">Transaction Time</IonLabel>
            <IonInput
              type="date"
              name="transaction_time"
              value={data.transaction_time}
              onChange={handleChange}
            />
          </IonItem>

          <IonItem>
            <IonLabel position="stacked">Transaction Type</IonLabel>
            <select name="transaction_type" onChange={handleChange}>
              <option value="">Select...</option>
              <option value="DISBURSAL">Disbursal</option>
              <option value="SETTLEMENT">Settlement</option>
            </select>
          </IonItem>

          <IonItem>
            <IonLabel position="stacked">Status</IonLabel>
            <IonInput
              type="text"
              name="status"
              value={data.status}
              onChange={handleChange}
            />
          </IonItem>

          <IonItem>
            <IonLabel position="stacked">Grace Period</IonLabel>
            <IonInput
              type="number"
              name="grace_period"
              value={data.grace_period}
              onChange={handleChange}
            />
          </IonItem>

          <IonItem>
            <IonLabel position="stacked">Remarks</IonLabel>
            <IonInput
              type="text"
              name="remarks"
              value={data.remarks}
              onChange={handleChange}
            />
          </IonItem>
          <IonItem>
            <IonButton color="primary" type="submit">
              Submit
            </IonButton>
          </IonItem>
        </form>
      </IonContent>
    </IonPage>
  );
}

export default CreateTransaction;

what is the error?

also your call to set data looks wrong, what you have will overwrite the data object everytime, it will not update it.

ohh thanks…may be due to setData issue I am facing the problem. Should I use spread operator in that to maintain the state?

i think that is the correct approach