import React, { Component } from 'react'
import './forms.css'
import axios from 'axios';
export default class Udel extends Component{
   constructor(props){
      super(props);
      this.state = {
         user_id: ''
      }
      this.handleChange=this.handleChange.bind(this);
      this.remove=this.remove.bind(this);
   }
   handleChange(event){
      this.setState({
         user_id : event.target.value
      });
     
   }
   remove(event){
      axios.delete('http://localhost:5000/user/'+this.state.user_id)
      .then(
         window.alert((this.state.user_id.toString()).concat(" is removed!"))
      )
      event.preventDefault();
   }
   render(){
      return(
         <div>
         <h3 style={{fontFamily:"Roboto",marginLeft:"20px"}}>
            <b>REMOVE USER</b>
         </h3>
         <form>
         <div><input type="text" placeholder="User_id" style={{marginLeft:"30px"}} onChange={this.handleChange} required/></div>
        
         <div><input type="submit" value="Remove" style={{marginBottom:"20px"}} onClick={this.remove}/></div>
        
        
        </form>
        </div>
      )
   }
}