Simple JS Form

by Matt Tyson

HTML

<div id="app"/>

React

function MyForm () {
  const [username, setUsername] = React.useState('');
  const [msg, setMsg] = React.useState('');
  const [isValid, setValid] = React.useState(true);
  React.useEffect(() => {
    if (isValid === false) {
      setMsg("Already have that Hobbit!");
    } else {
      setMsg("");
    }
  }, [isValid]);

  function handleUsernameChange (e) {
    setUsername(e.target.value);
  }
  function validateUsername (e){
   if (["frodo","bilbo","sam"].includes(e.target.value)){
     setValid(false);
     console.log(isValid);
   } else {
     setValid(true);
   }
  }
  
  function onSubmit(event) {
    event.preventDefault();
    if (isValid){
    	alert('Form submitted. firstName: ' + username);
    } else {
      alert('Invalid username');
    }
  }

  function handlePasswordChange (e) {
    setPassword(e.target.value)
  }

  return (
    <form onSubmit={onSubmit}>
      <p>Enter something in the box:</p>
      <input type="text" value={username} onChange={handleUsernameChange} onInput={validateUsername}/>
      <p>{msg}</p><p>valid: {JSON.stringify(isValid)}</p>
      <button type='submit'>Submit</button>
    </form>
  )
}

ReactDOM.render(<MyForm />, document.querySelector("#app"))