21-controlled-forms.html

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
  <script type="text/babel">
    function UsernameForm() {
      const [username, setUsername] = React.useState('')

      function handleSubmit(event) {
        event.preventDefault()
        alert(`You entered: ${username}`)
      }

      function handleChange(event) {
        setUsername(event.target.value.toLowerCase())
      }

      return (
        <form onSubmit={handleSubmit}>
          <div>
            <label htmlFor="usernameInput">Username:</label>
            <input
              id="usernameInput"
              type="text"
              onChange={handleChange}
              value={username}
            />
          </div>
          <button type="submit">Submit</button>
        </form>
      )
    }

    ReactDOM.render(<UsernameForm />, document.getElementById('root'))
  </script>
</body>