import {useState} from 'react';

export default function App() {
  const [email, setEmail] = useState('');
  const [validate, setValidate] = useState(null);  

  function isValidEmail(email) {
    return /\S+@\S+\.\S+/.test(email);
  }

  const handleChange = event => {
    if (!isValidEmail(event.target.value)) {
      setValidate('Email is invalid');
    } else {
      setValidate('Email is valid');
    }
    setEmail(event.target.value);
  };

  return (
    <div className="App">      
        <input value={email} onChange={handleChange}/>
        {validate && <p style={{color: 'red'}}>{validate}</p>}           
    </div>
  );
}