Building Form Without Formik

index.js

import React, { useState } from 'react';
import { render } from 'react-dom';

import './style.css';

const emailRegex = /(?:[a-z0-9!#$%&*+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;

let App = () => {
  const [ email, setEmail ] = useState('');
  const [ password, setPassword ] = useState('');
  
  const [ emailError, setEmailError ] = useState('');
  const [ passwordError, setPasswordError ] = useState('');

  const [ emailTouched, setEmailTouched ] = useState(false);
  const [ passwordTouched, setPasswordTouched ] = useState(false);

  const submitIsDisabled = !!emailError || !!passwordError || !emailTouched || !passwordTouched;

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(`Eamil : ${email}. Password ${password}`)
  }
  const handleEmailChange = (e) => {
    const input = e.target.value;
    setEmail(input);    
  }
  const handleEmailBlur = () => {
    if (!email.length) {
      setEmailError('This field is required')
    } else if (!emailRegex.test(email)){
      setEmailError('Must be a valid email')
    } else {
      setEmailError('');
    }
    setEmailTouched(true)
  }
  const handlePasswordChange = (e) => {
    const input = e.target.value;
    setPassword(input);    
  }
  const handlePasswordBlur = () => {
    if (!password.length) {
      setPasswordError('This field is required')
    } else if (password.length < 8){
      setPasswordError('Password must be at least 8 characters')
    } else {
      setPasswordError('')
    }
    setPasswordTouched(true);
   }

  const handleReset = (e) => {
    e.preventDefault();
    setEmail('');
    setEmailError('');
    setEmailTouched(false);

    setPassword('');
    setPasswordError('');
    setPasswordTouched(false);
  }

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email : </label>
          <input autoComplete="off" onBlur={handleEmailBlur} onChange={handleEmailChange} type="text" name="email" value={email} />
          <span>{emailError}</span>
        </div>

        <div>
          <label htmlFor="password">Password : </label>
          <input autoComplete="off" onBlur={handlePasswordBlur} onChange={handlePasswordChange} type="text" name="Password" value={password} />
          <span>{passwordError}</span>
        </div>

        <button  type="submit" disabled={submitIsDisabled}> Submit</button>
        <button type="button" onClick={handleReset}>Reset</button>

      </form>
    </div>
  );
};

//export defatul App;

render(<App />, document.getElementById('root'));

Reference

StackBlitz
Email Regex