React Js - Handle Form | Checkbox | Input field | Select

 App.js:

import React, { useState } from 'react';

import './App.css'

function App() {

  const [name, setName] = useState("")

  const [gender, setGender] = useState("")

  const [tnc, setTnc] = useState(false)

  function getData(e) {

    console.warn(name, gender, tnc)

    e.preventDefault()

  }

  return (

    <div className='App'>

      <form onSubmit={getData}>

        <br /><br /><br />

        <input type="text" placeholder="Enter Name" onChange={(e) => setName(e.target.value)} /> <br /><br />

        <select onChange={(e) => setGender(e.target.value)}>

          <option>Select Option</option>

          <option>Male</option>

          <option>Female</option>

        </select>

        <br /><br />

        <input type="checkbox" onChange={(e) => setTnc(e.target.checked)} /><span>Accept Terms and Conditions</span>

        <br /><br />

        <button type="submit">Submit</button>

      </form>

    </div>

  )

}

export default App;