0

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;
Adnan
  • 1

0 Answers0