```

import React, { Component } from 'react';

import './App.css';



const EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/



class App extends Component {



state = {

fields: {

email: '',

password: ''

},

errors: []

}



handleInput = (event) => {

console.log(event.target.value);

let { email, password } = this.state.fields



if (event.target.name === 'email') {

email = event.target.value

}

else if (event.target.name === 'password') {

password = event.target.value

}



const fields = { email, password };

this.setState({ fields: fields });

}



handleSubmit = (event) => {

const { email, password } = this.state.fields

const errors = []

event.preventDefault();



// password validation

if (!password || password.length < 8) {

errors.push('Insufiecient password')

}

// email validation

if (EMAIL_REGEXP.test(email)) {

errors.push('Bad email')

}



// email validation

this.setState({ errors })

}





render() {

const { email, password } = this.state.fields;

const { errors } = this.state



return (

<div className="App">

<form onSubmit={this.handleSubmit}>

<p>{errors.join(' ')}</p>

<div className="form-group">

<input type="text" name="email" value={email} onChange={this.handleInput}></input>

<span className="prompt"></span>

</div>

<div className="form-group">

<input type="password" name="password" value={password} onChange={this.handleInput}></input>

<span className="prompt"></span>

</div>



<button type="submit">Submit</button>

</form>

</div>

);

}

}



export default App;



```