Loading a particular dynamic button in reactjs using antd Button styling

Question

Hello i want to loading a button when i am clicking it. My problem is that my buttons are created dynamic. I am using antd styling for the button. My code is below

              <Button
                loading={this.state.myLoader}
                onClick={() => this.myFunction(r,i)}>
                  Clickme!
              </Button>

I was trying using inside onclick method a state that can become true when this function in executed, my problem with this is when i click a button all the button are loading, but i want to loading only the selected button. How i can do this? Inside my onclick method i can take the id of the button that is clicked every time

Answer 1

Try this

this.state = {
 myLoader: []
}

In onClick pass the index to the function

this.myFunction = (r, i) => {
   const loader = [...this.state.myLoader];
   loader[i] = true;
   this.setState({myLoader: loader)};
}

in the button

<Button
    loading={this.state.myLoader[i]}
     onClick={() => this.myFunction(r,i)}>
          Clickme!
 </Button>