Why does handleChange not fire correctly in react.js?

Viewed 21

I am working on a project where I have created a form in react.js with radio buttons but handleChange event is not firing the correct value of selected radio button. When I select male the formData object still has an empty value of gender, when I select it again the value of gender in formData gets updated to 0 which is equal to female. Please help me know what is the problem with my code.

import React from "react"

function Questions(props) {
  const [formData, setFormData] = React.useState({
    age: "",
    gender: "",
    polyuria: "",
    polydipsia: "",
    weight_loss: "",
    weakness: "",
    polyphagia: "",
    genital_thrush: "",
    visual_blurring: "",
    itching: "",
    irritability: "",
    delayed_healing: "",
    partial_paresis: "",
    muscle_stiffness: "",
    alopecia: "",
    obesity: "" 
})

function handleChange(event) {
  const name = event.target.name
  const value = event.target.value
  setFormData(prevFormData => ({
    ...prevFormData,
      [name]: value
  }))
  console.log(formData)
}



  return (
    <div>
      <h1>Here will be Questions</h1>
      <div className="form">
        <p id="age" name="age">How old are you?</p>
        <input type="number" min="1.20" max="5" htmlFor="age" value={formData.age} name="age" 
        onChange={handleChange}/>
        <p id="gender">What is your gender?</p>
        <input type="radio" id="male" name="gender" value="1" htmlFor="gender" 
        onChange={handleChange}  checked={formData.gender === "1"}/>Male
        <input type="radio" id="female" name="gender" value="0" htmlFor="gender" 
        onChange={handleChange} checked={formData.gender === "0"}/>Female
        <p>Do you suffer from Polyuria?</p>
        <p>If you are unfamiliar, read about Polyuria <a href="#">here</a></p>
        <label><input type="radio" id="yes" name="polyuria" value="1" onChange={handleChange} checked={formData.polyuria === "1"}/>Yes</label>
        <label><input type="radio" id="no" name="polyuria" value="0" onChange={handleChange} checked={formData.polyuria === "0"}/>No</label>
        <p>Do you suffer from Polydipsia?</p>
        <p>If you are unfamiliar, read about Polydipsia <a href="#">here</a></p>
        <label><input type="radio" id="yes" name="polydipsia" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="polydipsia" value="0" onChange={handleChange}/>No</label>
        <p>Have you noticed sudden weight loss in yourself?</p>
        <label><input type="radio" id="yes" name="weight_loss" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="weight_loss" value="0" onChange={handleChange}/>No</label>
        <p>Do you feel more weakness than usual throughout the day?</p>
        <label><input type="radio" id="yes" name="weakness" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="weakness" value="0" onChange={handleChange}/>No</label>
        <p>Do you suffer from Polyphagia?</p>
        <label><input type="radio" id="yes" name="polyphagia" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="polyphagia" value="0" onChange={handleChange}/>No</label>
        <p>Do you suffer from Genital Thrush?</p>
        <label><input type="radio" id="yes" name="genital_thrush" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="genital_thrush" value="0" onChange={handleChange}/>No</label>
        <p>Have you noticed your vision blurring?</p>
        <label><input type="radio" id="yes" name="visual_blurring" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="visual_blurring" value="0" onChange={handleChange}/>No</label>
        <p>Do you duffer from unusual itching on your body?</p>
        <label><input type="radio" id="yes" name="itching" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="itching" value="0" onChange={handleChange}/>No</label>
        <p>Do you experience unusual irritability/ mood swings?</p>
        <label><input type="radio" id="yes" name="irritability" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="irritability" value="0" onChange={handleChange}/>No</label>
        <p>Have you noticed delayed healing of wounds/ scars?</p>
        <label><input type="radio" id="yes" name="delayed_healing" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="delayed_healing" value="0" onChange={handleChange}/>No</label>
        <p>Do you suffer from Partial paresis?</p>
        <label><input type="radio" id="yes" name="partial_paresis" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="partial_paresis" value="0" onChange={handleChange}/>No</label>
        <p>Do you suffer from muscle stiffness?</p>
        <label><input type="radio" id="yes" name="muscle_stiffness" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="muscle_stiffness" value="0" onChange={handleChange}/>No</label>
        <p>Do you suffer from Alopecia?</p>
        <label><input type="radio" id="yes" name="alopecia" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="alopecia" value="0" onChange={handleChange}/>No</label>
        <p>Are you obese?</p>
        <label><input type="radio" id="yes" name="obesity" value="1" onChange={handleChange}/>Yes</label>
        <label><input type="radio" id="no" name="obesity" value="0" onChange={handleChange}/>No</label>
        <button>Predict</button>
      </div>
      <button onClick={props.toggleBack}>Back</button>
    </div>
  )
  
}

export default Questions
1 Answers

change your handle function to this

function handleChange(event) {
  const name = event.target.name
  const value = event.target.value
  const updatedData = {...formData,[name]:value}
  setFormData(updatedData)
  console.log(formData)
}

currently your state update and render is not aligned.

Related