import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props)
    this.handle = this.handle.bind(this)
  }
  state = {
    email: '',
    username: '',
    password: ''
  }
  handle = (type, event) =>{
    switch (type){
      case "emailChanged": {
        this.setState({email: event.target.value})
        break;
      }
      case "usernameChanged": {
        this.setState({username: event.target.value})
        break;
      }
      case "passwordChanged": {
        this.setState({password: event.target.value})
        break;
      }
      case "submit": {
        console.log('Submit')
        break;
      }
      default: break;
    }
  }
  render() {
    return (
      <div>
        <input type="text"  value={this.state.email} onChange={(e)=>{this.handle('emailChanged', e)}} />
        <input type="text" value={this.state.username} onChange={(e)=>{this.handle('usernameChanged', e)}} />
        <input type="password" value={this.state.password} onChange={(e)=>{this.handle('passwordChanged', e)}} />
        <button onClick={(e)=>{this.handle('submit', e)}}>Submit</button>
      </div>
    );
  }
}

export default App;