Skip to content

Latest commit

 

History

History
63 lines (52 loc) · 2.77 KB

20-react-make-dynamic-forms-with-react-d69753ec.md

File metadata and controls

63 lines (52 loc) · 2.77 KB
Raw

20. Make Dynamic Forms with React

📹 Video

💻 CodeSandbox

Notes

  • Often, it can be useful to know what the user’s input is as they’re typing it and use that information to change what is rendered. This can be good for dynamic search or filter inputs, or triggering changes when a user checks a checkbox, or a myriad of other use cases.
  • W’re going to dynamically show an error message if the user types something invalid so they don’t have to wait until they submit the form to know they’re doing something wrong.
  • To do this we’ll store the input’s value in state and then use that state to derive an error message which will be displayed if there is an error.
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    function UsernameForm() {
      // adding state to handle username, keeping it up to date
      // updating the current state of the user's input
      const [username, setUsername] = React.useState('');
      // determine if it's lower case / displaying error message
      const isLowerCase = username === username.toLowerCase();
      const error = isLowerCase ? null : 'Username must be lower case';

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

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

      return (
        <form onSubmit={handleSubmit}>
          <div>
            <label htmlFor="usernameInput">Username:</label>
            {/* Calling the function handleChange */}
            <input id="usernameInput" type="text" onChange={handleChange} />
          </div>
          {/* displaying error message */}
          <div style={{ color: 'red' }}>{error}</div>
          {/* disable button boolean */}
          <button disabled={Boolean(error)} type="submit">
            Submit
          </button>
        </form>
      );
    }

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

Additional resource