Why does the query go through two elements?

Question

React

There is such a code

import React from 'react';
import AuthService from './AuthService'
import axios from 'axios'; 
const Auth = new AuthService();
const token = Auth.getToken();


  // Contaner Component (Ignore for now)
  class TodoApp extends React.Component{
    constructor(props){
        // Pass props to parent class
        super(props);
        // Set initial state
        this.state = {
         name:'',
         description:'',
         done:false,
         data:[],
         term:'',
         payloadName:'',
         payloadDescription:'',
         payloadDone:false
       

        }
        this.proxyUrl  = 'https://cors-anywhere.herokuapp.com/';
        this.apiUrl    = apiUrl;
        this.config  = {
          headers: {
            'Content-Type': 'application/json',
             Authorization:'Token '+token
          }
        };
      }
      componentDidMount(){
        axios({
          method:'GET', 
          url:this.proxyUrl + this.apiUrl,
          headers:{Authorization:'Token '+token},
          data:null})
          .then((res) => {
           
           this.setState({data:res.data})
          });
      }
      handleChange = event => {
        this.setState({ [event.target.name]: event.target.value,
        term:event.target.value });;
      }
      handleCheck = () => {
        this.setState({done:!this.state.done})
      }
      handleSubmit = event => {
        event.preventDefault();
        const config = {
          headers: {
            'Content-Type': 'application/json',
             Authorization:'Token '+token
          }
        };
        const payload = JSON.stringify({       
          name:this.state.name,
          description:this.state.description,
          done:this.state.done
   });
        axios.post(this.proxyUrl+this.apiUrl,payload,config)
        .then((res)=>{
          
        }) 
        
               
        }
        
        onDeleteClick = (id) => {
          axios.delete(this.proxyUrl + this.apiUrl +  id + '/',this.config).then((res) => {
            })
      }
      onUpdateClick = (id) => {
        const payload =  JSON.stringify({       
          name:this.state.payloadName,
          description:this.state.payloadDescription,
          done:this.state.payloadDone
   });
   
        axios.put(this.proxyUrl + this.apiUrl +  id + '/',payload,this.config).then((res) => {
          
        })
      }
    handleUpdateContent = () =>{
      this.setState({update:!this.state.update})
    }
    render(){
      return (
        <div>
        <div>
          <h1>Add you task </h1>
        <form onSubmit={this.handleSubmit} className="todoform">
          <label>
            Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <label>
            Desciption:
            <input type="text" name="description" onChange={this.handleChange} />
          </label>
          <label>
            Done:
            <input type="checkbox" name="done" checked={this.state.done} onChange={this.handleCheck} />
          </label>
          <button type="submit">Add</button>
        </form>
        </div>
          {
            this.state.data.map(datas =>{
              return (
                <div className="cart" key={datas.id}>
                <h1>{datas.name} </h1>
                <h2>{datas.description} </h2>
                <h3>{String(datas.done)} </h3>
                <button type="submit" onClick={() => this.onDeleteClick(datas.id)}>Delete task </button>
                <a onClick={this.handleUpdateContent}> Update task </a>
                {this.state.update?
                  <div>
                   
          <h1>Add you update </h1>
        <form>
          <label>
            Name:
            <input type="text" name="payloadName" onChange={this.handleChange} />
          </label>
          <label>
            Desciption:
            <input type="text" name="payloadDescription" onChange={this.handleChange} />
          </label>
          <label>
            Done:
            <input type="checkbox" name="payloadDone" checked={this.state.done} onChange={this.handleCheck} />
          </label>
          <button type="submit" onClick={()=>this.onUpdateClick(datas.id)}>Add</button>
        </form>
        </div>
                    
                 : null}
                </div>
              )
            })
          }
        </div>
      
      );
    }
  }
  export default TodoApp;

So here's the question itself:
Why does the onUpdateClick method immediately access all the elements that are in the map, and not by id, as for example the onDeleteClick method works for me? And how can I refer to this method by id correctly?