add_user.jsx

import React, { Component } from 'react'
import './forms.css'
import axios from 'axios';

export default class Uadd extends Component{
   constructor(props){
      super(props);
      this.state = {
         User_id: '',
         name: '',
         Email: '',
         Password: '',
        
       }
      this.handleChange=this.handleChange.bind(this);
      this.add=this.add.bind(this);
   }
   handleChange (event) {
      this.setState({ [event.target.name]: event.target.value});
     
   }
   add(event){
      
     const user =  {
         user_id: this.state.User_id,
         name: this.state.name,
         email: this.state.Email,
         password: this.state.Password,
    }
     axios.post('http://localhost:5000/user/add',user)
     .then(window.alert("User successfully added!"))
     .catch(console.error())
     event.preventDefault();
    }
   render(){
      return(
         <div>
         <h3 style={{fontFamily:"Roboto",marginLeft:"20px"}}>
            <b>USER ADDITION</b>
         </h3>
         <form>
         
         <ul style={{listStyle:"none"}}>
         <li><div>
         <input type="text" placeholder="User_id" name="User_id" onChange={this.handleChange} required/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         <input type="text" placeholder="User_Name" name="name" onChange={this.handleChange} required/>
         </div></li>    
         <li><div>
         <input type="text" placeholder="Email" name="Email" onChange={this.handleChange} required/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         <input type="text" placeholder="Password" name="Password" onChange={this.handleChange} required/>  
         </div></li>    
         <li><div>
         <input type="submit" value="Add User" onClick={this.add}/></div></li>
         </ul>
        
        </form>
        </div>
 );
   }
}