Update data Axios – Put method

Going through your code, I found the issue due to which you’re not able to TASK_ID to Http put method. You’ve not passed the required arguments to event handler.

Here is your method which handles onClick event when user tries to Update by clicking on Update button present in Overview.js

handleTaskUpdate = (event, TASK_ID) => {
  //rest of your code     
}

Here is your code accessing handleTaskUpdate method in Overview.js

<p className="w3-center">
  <button 
    type="submit" 
    onClick={this.props.update} //handleTaskUpdate passed as property named update
    style={btnSubmit}
    className = "w3-button w3-cyan w3-round" 
    >
     Update 
   </button>
 </p>

As you can see your method requires two parameters first one is synthetic event and second one is additional argument TASK_ID.

Currently you’re not sending the additional argument “TASK_ID” to handleTaskUpdate method due to which TASK_ID will be undefined

Correct way of sending additional parameters can be done by various method (Below are few examples).

  1. Using arrow keyword (Not preferred as you are essentially creating a new function that calls this.handleTaskUpdate method during each render)

    <button onClick={(event) => this.handleTaskUpdate(event, TASK_ID)}>Update</button>
    
  2. Using bind keyword

    <button onClick={this.handleTaskUpdate.bind(this,TASK_ID)}>Update</button>
    
  3. Using dynamic binding with the Arrow Function for multiple elements (I prefer this method)

    //using double bind method
    handleTaskUpdate = (TASK_ID) => (event) => {
      //rest of your code
    }
    
    //using handleTaskUpdate
    <button onClick={this.handleTaskUpdate(TASK_ID)}>Update</button>
    

Hope this helps in solving your problem.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top