Here the value in input section is not changing it is static I do not know what mistake I'm doing here..

Here is the code with state and return code..

And in Output section it showing patient id and procedure and it is static i can't change it idk what happend.

 const [patient_info, setPatient_info] = useState({
    patientid: "",
    procedure: "",
  });
 const handlePatient = (e) => {
    
    const { name, value} = e.target;
    if (value) {
      if (name === "patientid")
        setPatient_info({ ...patient_info, [name]: value });
      else if (name === "procedure")
        setPatient_info({ ...patient_info, [name]: value });
    }
    else setPatient_info({...patient_info, [name]:""});
    console.log(patient_info.patientid);
  };
    <Typography
                color="#05445E"
                fontFamily="'Jost', sans-serif"
                fontSize={15}
              >
                Patient ID :{" "}
                <Input
                  disableUnderline="true"
                  value={"Patient ID"}
                  name="patientid"
                  fullWidth
                  className={classes.input_2}
                  onChange={handlePatient}
                />
              </Typography>

Here is the output

I tried various way but it didn't work. What I want is whenever I enter the data the in input section it should show in console log simultaneously. If anyone can help I will be grateful thank you

CodePudding user response：

It is because you have value={"Patient ID"}. Replace by value={patient_info.patientid} and it should work

CodePudding user response：

Dude, you have to understand what react hook is doing first. Also, do some code practice, I suggest you refer to Airbnb JavaScript Style Guide.

// which is a hardcoded value, it always is "Patient ID"
value={"Patient ID"}

// var means that the dynamic variable
value={var}

and now you wanted to get the value from the state

import { useState } from "react";

const Demo = () => {
    const [patient_info, setPatient_info] = useState({
        patientid: "",
        procedure: "",
    });
    const handlePatient = (e) => {
        const { name, value } = e.target;

        if (value && (name === "patientid" || name === "procedure")) {
            setPatient_info({ ...patient_info, [name]: value });
        } else {
            setPatient_info({ ...patient_info, [name]: "" });
        }
    };

    return <>
        <div
            color="#05445E"
            fontFamily="'Jost', sans-serif"
            fontSize={15}
        >
            Patient ID :{" "}
            <input
                value={patient_info.patientid}
                name="patientid"
                fullWidth
                onChange={handlePatient}
            />
        </div>
    </>
}

export default Demo;