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;