SignIn.jsx

function SignIn (props) {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [pending, setPending] = useState('')
  const [error, setError] = useState({})
  
  useEffect(()=>{
    if(pending) {
      api.signIn(username, password)
      .then(res => {
        if(res.ok) {
          // do something when succeed
          // e.g. props.history.push('dashboard')
        } else {
          setError(res.error)
          setPending(false)
        }
      })
    }
  }, [pending])
  
  function submit (e) {
    e.preventDefault()
    setPending(true)
  }
  
  return (
    <form onSubmit={submit}>
      <input value={username} onChange={e=>setUsername(e.target.value)} />
      <input value={password} onChange={e=>setPassword(e.target.value)} />
      <button type='submit' />
    </form>
  )
}