update_book.jsx

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

export default class Bupdate extends Component{
   constructor(props){
      super(props);
      this.state = {
         book_id: '',
         book_name: '',
        author: '',
        price: 0.0,
       }
      this.handleChange=this.handleChange.bind(this);
      this.update=this.update.bind(this);
   }
   handleChange (event) {
      this.setState({ [event.target.name]: event.target.value});
   }
 
   update(event){
     const book ={
           
         book_id: this.state.book_id,
         book_name: this.state.book_name,
         author: this.state.author,
         price: Number(this.state.price),
     }
     Axios.post('http://localhost:5000/book/update/'+this.state.book_id,book)
     .then( window.alert("Book updated successfully!"))
     .catch(function(error) {
         window.alert("error" + error);
     });
     event.preventDefault();
    }
   render(){
      return(
         <div>
         <h3 style={{fontFamily:"Roboto",marginLeft:"20px"}}>
            <b>BOOK UPDATION</b>
         </h3>
         <form>
         
         <ul style={{listStyle:"none"}}>
         <li><div>
         <input type="text" placeholder="Book_id" name="book_id" onChange={this.handleChange} required/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         <input type="text" placeholder="book_name" name="book_name" onChange={this.handleChange} required/>
         </div></li>    
         <li><div>
         <input type="text" placeholder="Author" name="author" onChange={this.handleChange} required/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         <input type="text" placeholder="Price" name="price" onChange={this.handleChange} required/>
         </div></li>    
          
         <li><div>
         <input type="submit" value="Update" onClick={this.update}/>
         </div></li>
         </ul>
        
        </form>
        </div>
 );
   }
}