I am new to Ionic/React. I have created a simple form which has two input field.In this form i can cannot enter data in that field whats problem in ionic/react input I am new to Ionic/React. I have created a simple form which has two input field.In this form i can cannot enter data in that field whats problem in ionic/react input
import {
IonButton,
IonCol,
IonContent,
IonGrid,
IonInput,
IonLabel,
IonPage,
IonRow,
IonTitle,
} from "@ionic/react";
import {useState } from "react";
import { useHistory } from "react-router";
import "../Student/students.css";
const AdmissionForm = () => {
const history = useHistory();
const [inpval, setINP] = useState({
name: "",
email: "",
})
const setdata = (e:any) => {
console.log(e.target.value);
const { name, value } = e.target;
setINP((preval) => {
return {
...preval,
[name]: value
}
})
}
const addinpdata = async (e:any) => {
e.preventDefault();
const { name, email, } = inpval;
if (name === "") {
alert("name is required")
} else if (email === "") {
alert("email is required")
} else if (!email.includes("@")) {
alert("enter valid email")
} else {
const res = await fetch("http://localhost:8001/create", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
name, email,
})
});
const data = await res.json();
console.log(data);
if (res.status === 422 || !data) {
console.log("error ");
alert("error");
} else {
history.push("/")
// setUdata(data)
console.log("data added");
}
}
}
return (
<>
<IonPage>
<IonContent color="secondary" className="ion-padding border">
<IonGrid className="detail-grid ion-padding">
<IonRow>
<IonTitle className="admission-title">Add New Studnet</IonTitle>
</IonRow>
<IonRow>
<IonCol sizeLg="3" sizeMd="5.5" size="12">
<IonLabel position="floating">Student Name *</IonLabel>
<IonInput
className="input-field"
value={inpval.name} onIonChange={setdata}
type="text"
/>
</IonCol>
<IonCol sizeLg="3" sizeMd="5.5" size="12">
<IonLabel position="floating">Email</IonLabel>
<IonInput
className="input-field"
value={inpval.email} onIonChange={(e)=>setdata}
/>
</IonCol>
</IonRow>
<IonRow>
<IonCol sizeLg="6">
<IonButton onClick={addinpdata} type="submit" >
Save
</IonButton>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
</>
);
};
export default AdmissionForm;