react bulma login

Solutions on MaxInterview for react bulma login by the best coders in the world

showing results for - "react bulma login"
Maria
15 Nov 2019
1import React from 'react'
2import axios from 'axios'
3import { useHistory } from 'react-router-dom'
4function Login() {
5  const history = useHistory()
6  const [formData, setFormData] = React.useState({
7    email: '',
8    password: '',
9  })
10  const handleChange = (e) => {
11    setFormData({ ...formData, [e.target.name]: e.target.value })
12  }
13  const handleSubmit = async (e) => {
14    e.preventDefault()
15    try {
16      await axios.post('LOGIN API ADDRESS HERE', formData)
17      history.push('/')
18    } catch (e) {
19      console.log(e.response.data)
20    }
21
22    console.log('Form has been submitted')
23  }
24
25  return (
26    <section className="section">
27      <div className="container">
28        <div className="columns">
29          <form
30            className="column is-half is-offset-one-quarter"
31            onSubmit={handleSubmit}
32          >
33            <div className="field">
34              <label className="label" htmlFor="email">
35                Email
36              </label>
37              <div className="control">
38                <input
39                  className="input"
40                  name="email"
41                  id="email"
42                  onChange={handleChange}
43                  placeholder="Email"
44                />
45              </div>
46            </div>
47            <div className="field">
48              <label className="label" htmlFor="password">
49                Password
50              </label>
51              <div className="control">
52                <input
53                  className="input"
54                  name="password"
55                  id="password"
56                  type="password"
57                  onChange={handleChange}
58                  placeholder="Password"
59                />
60              </div>
61            </div>
62
63            <div className="field">
64              <button type="submit" className="button is-fullwidth is-warning">
65                Login
66              </button>
67            </div>
68          </form>
69        </div>
70      </div>
71    </section>
72  )
73}
74export default Login
75