How to bind an event to a single element?

Question

React

Hello, here is the 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:'',
         update:false,
         payloadName:'',
         payloadDescription:'',
         payloadDone:''
        }
        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 = {       
          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)}>Update</button>
        </form>
        </div>
                    
                 : null}
                </div>
              )
            })
          }
        </div>
      
      );
    }
  }
  export default TodoApp;

there is an update button in the Map and now it should call a new block, but by clicking on it, this block is called for everyone. How can I fix this? need id

Answer 1

<button type="submit" onClick={() => this.onUpdateClick(datas.id)}>Update</button>

Answer 2

I meant this button

<a onClick={this.handleUpdateContent}> Update task </a>

, can it somehow be tied to only one block?