Disable buttons after updating redux store?

Question

JavaScript

Hey!
I can't figure out how to disable the button individually when a new value comes from the redux store.
The button from the list should be disabled while loading data from the API, but when I write disable={loading} , the disable attribute is added to all buttons, and I need the attribute to be added only to the one that was pressed.
The code is like this:

...
  handleClick = () => {
// Запрос в  API
    this.props.fetch();
  };
...
  render() {
    const { loading } = this.props;
    return (
      <SubList d={visibility}>
        {list.map((data, i) => (
          <Button
            key={i.toString()}
            onClick={this.handleClick}
            disabled={loading}
          />
        ))}
      </SubList>
    );
  }

Here { loading } is a boolean value that comes from the redux store.
Assume that 10 buttons are rendered, how do I make it so that when I click on a specific button, the disable attribute is hung only on the button that I clicked.

Answer 1

Obviously like this:

render() {
    return (
      <SubList d={visibility}>
        {list.map((item, i) => (
          <Button
            key={i.toString()}
            onClick={this.handleClick}
            disabled={item.isLoading}
          />
        ))}
      </SubList>
    );
  }