Login Form Component

import React from 'react';
import './login.scss';

import tool from '../tool';

class Login extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      message: '',
      email: '',
      password: ''
    };
  }

  onChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  }

  onSubmitHandler = async (event) => {
    event.preventDefault();
    const data = await tool.fetchPostAPI('/admin/login', this.state);
  }

  render(){
    return(
      <div className='Login region'>
        <form id="login" action="/admin/login" method="post" onSubmit={this.onSubmitHandler}>
          <span>Email:</span><input onChange={this.onChangeHandler} type="email" name="email" required />
          <span>Password:</span><input onChange={this.onChangeHandler} type="password" name="password" required />
          <span></span><input type="submit"  />
        </form>
        <div className="message"> {this.state.message} </div>
      </div>
    );
  }
}

export default Login;

class Tool {

  async fetchAPI(uri){
    try{
      let res = await fetch(uri);
      return await res.json();
    }catch(error){
      console.log(error);
    }
  }

  async fetchPostAPI(uri, data){
    const option = {
      method: "POST", 
      body: JSON.stringify(data),
      headers: {'Content-type': 'application/json; charset=UTF-8'}
    }

    try{
      let res = await fetch(uri, option);
      return await res.json();
    }catch(error){
      console.log(error);
    }
  }
  
}// class end 

const tool = new Tool();

export default tool;

.Login{
  margin-top: 30px;
  background:lightgrey;
  border-radius:3px;
  max-width:450px;
  #login{
    display:grid;
    grid-template-columns: 30% auto;
    grid-gap:5px;
    align-items: center;
    margin:30px auto 0;
    padding:20px;
    span{
      text-align:right;
    }
    input{
      padding:0 5px;
      font:14px/1.75 Vidaloka;
    }
  }
  .message{
    padding-bottom: 10px;
  }
}

GitHub: "https://github.com/Sokhavuth/emultimedia
Heroku: https://khmerweb-emultimedia.herokuapp.com/