React Forms with Input Checkbox Radio Buttons and Dropdown

Part 3 – Components state and props in React
https://onlyfullstack.blogspot.com/2019/11/react-components-state-props-lifecycle.html

Part 4 – Event Handling in React
https://onlyfullstack.blogspot.com/2019/11/event-handling-in-react.html

Part 5- Parent Child Component Communication in React
https://onlyfullstack.blogspot.com/2019/11/parent-child-component-communication-in-react.html

React Form with Input text

We have added a onChange handler and assigned the method handleChange method.

<label>
          <div className="heading">First Name</div>
          <input
            type="text"
            name="firstName"
            value={state.firstName}
            onChange={handleChange}
          />
        </label>

handleChange method used for all the inputs.

function handleChange(evt) {
    const value =
      evt.target.type === "checkbox" ? evt.target.checked : evt.target.value;
    setState({
      ...state,
      [evt.target.name]: value
    });
  }

React Form with Checkbox

The handleChange with differ for checkbox as the checkbox will true the true or false value for the checkbox and that’s why we have added the ternary if condition to have explicit check for the checkbox.

<label>
  <div className="heading">Interested in Freelancing?</div>
  <input
    type="checkbox"
    name="freelancing"
    checked={state.freelancing}
    onChange={handleChange}/>
</label>

React Form with Radio Button

<div>
  <div className="heading">Degree</div>
  <label>
    Bachelors
    <input
      type="radio"
      name="level"
      value="bachelors"
      checked={state.level === "bachelors"}
      onChange={handleChange}
    />
  </label>
  <label>
    Masters
    <input
      type="radio"
      name="level"
      value="masters"
      checked={state.level === "masters"}
      onChange={handleChange}
    />
  </label>
</div>
<div>
  <div className="heading">Degree</div>
  <label>
    Bachelors
    <input
      type="radio"
      name="level"
      value="bachelors"
      checked={state.level === "bachelors"}
      onChange={handleChange}
    />
  </label>
  <label>
    Masters
    <input
      type="radio"
      name="level"
      value="masters"
      checked={state.level === "masters"}
      onChange={handleChange}
    />
  </label>
</div>

React Form with Dropdown list

<label>
  <div className="heading">Technology</div>
  <select
    name="technology"
    onChange={handleChange}
    value={state.technology}>
    <option value="java">Java</option>
    <option value="dotnet">Dot Net</option>
    <option value="python">Python</option>
    <option value="cpp">C++</option>
  </select>
</label>

You can check the complete example of React form with all input types on below editor or link.
React Form with All Input Types

Source Code
You can edit and play with the react examples on below stackblitz site – 
https://stackblitz.com/@onlyfullstack

https://onlyfullstack.blogspot.com/2019/11/react-tutorial.html