I have a form that I shall use for filtering searches. Along with other fields, I have a checkbox. This is how I am handling the submit

const [formData, setFormData] = useState({
    name: "",
    location: "",
    schoolName: "",
    class: 0,
    board: 0,
    homeTuition: false,
  });

  const changeFormData = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const formDataSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
    setFormData({
      name: "",
      location: "",
      schoolName: "",
      class: 0,
      board: 0,
      homeTuition: false,
    });
  };

<form onSubmit={(e) => formDataSubmit(e)}>
            <div className="word">
              <input
                type="text"
                name="name"
                id="name"
                placeholder="teacher name"
                value={formData.name}
                onChange={(e) => changeFormData(e)}
              />
            </div>
            <div className="word">
              <input
                type="text"
                name="location"
                id="location"
                placeholder="location / area name"
                value={formData.location}
                onChange={(e) => changeFormData(e)}
              />
            </div>
            <div className="word">
              <input
                type="text"
                name="schoolName"
                id="schoolName"
                placeholder="Name of School"
                value={formData.schoolName}
                onChange={(e) => changeFormData(e)}
              />
            </div>

            <div className="select-menu">
              <select
                value={formData.class}
                name="class"
                id="class"
                onChange={(e) => changeFormData(e)}
              >
                <option value="0" disabled hidden>
                  Select Class
                </option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
              </select>
            </div>

            <div className="select-menu">
              <select
                value={formData.board}
                name="board"
                id="board"
                onChange={(e) => changeFormData(e)}
              >
                <option value="0" disabled hidden>
                  Select Board
                </option>
                <option value="mbose">MBOSE</option>
                <option value="cbse">CBSE</option>
                <option value="icse">ICSE</option>
              </select>
            </div>

            <div className="home-tutor">
              <label htmlFor="homeTuition">
                Home Tutor
                <input
                  type="checkbox"
                  name="homeTuition"
                  id="homeTuition"
                  value={formData.homeTuition}
                  onChange={(e) => changeFormData(e)}
                />
                <span></span>
              </label>
            </div>

            <div className="submit-button">
              <button type="submit">Apply Filter</button>
            </div>
          </form>

I want to set homeTuition as true if checked else false. But since I am new to react I do not understand where to write this logic.

I tried using a seperate useState for this that changes the bool value onClick but I understood that it immediately doesn't effect the target.value. So please help me how should I do it?.

CodePudding user response：

If you want to use a single handler:

const changeFormData = (e) => {
    const { name, type } = e.target;
    setFormData({
        ...formData,
        [name]: e.target[type === "checkbox" ? "checked" : "value"]
    });
};

return (
    <input
        type="text"
        name="schoolName"
        id="schoolName"
        placeholder="Name of School"
        value={formData.schoolName}
        onChange={(e) => changeFormData(e)}
    />
    <input
        type="checkbox"
        name="homeTuition"
        id="homeTuition"
        checked={formData.homeTuition}
        onChange={(e) => changeFormData(e)}
    />
);

CodePudding user response：

Add addition function:

  const changeCheckbox = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.checked,
    });
  };  

Change input tag for checkbox (use 'checked' instead 'value' and new function):

        <input
          type="checkbox"
          name="homeTuition"
          id="homeTuition"
          checked={formData.homeTuition}
          onChange={(e) => changeCheckbox(e)}
        />