Discussion on: Setup a customisable multi-step form in React

[Shikhar Sharma]

How would you handle change for a radiobox? Your handle change works just for text inputs.

[Michael Burrows]

If you wanted to add a gender radio select for example you would first need to add it to the formData state:

const [formData, setFormData] = useState({
    name: "",
    gender: "",
    email: "",
    street: "",
    city: "",
    postcode: "",
    comments: "",    
  });

Then in the form step the radio would be rendered like this:

<p>
        <label htmlFor="name">Male:</label>
        <input
            type="radio"
            name="gender"
            value="male"
            checked={data.gender === "male"}
            onChange={handleChange}            
          />    
        <label htmlFor="name">Female:</label>
        <input
              type="radio"
              name="gender"
              value="female"
              checked={data.gender === "female"}
              onChange={handleChange}            
            />    
      </p>