Disable кнопки после обновления redux store?

Question

[Unknown]

Привет!
Не могу понять как мне дизейблить кнопку индивидуально когда из redux store приходит новое значение.

Кнопка из списка должна быть задизейблена во время загрузки данных из API, но когда пишу disable={loading}, то атрибут disable добавляется ко всем кнопкам, а мне нужно чтобы атрибут добавлялся только к той которую нажал.

Код такой:

...
  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>
    );
  }

Здесь { loading } - это булевое значение которое приходит из redux store

Предположим что кнопок отрисовывается 10, как мне сделать так чтобы во время клика на конкретную кнопку атрибут disable вешался только на ту кнопку на которую я кликнул.

Answer 1

[Антон Спирин]

Очевидно, что так:

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

Comments

[Unknown]

Спасибо за идею. Было бы круто так просто решить задачу, но в данном проекте это дороже выйдет по времени ковырять редакс и добавлять в объект с кнопкой еще одно значение)

[Антон Спирин]

Unknown, ну вы можете свой ключ loading переделать в карту:

loading: {
  123414: true,
  /* ... */
}

И тогда:

render() {
    const { loading } = this.props;

    return (
      <SubList d={visibility}>
        {list.map(item => (
          <Button
            key={item.id}
            onClick={this.handleClick}
            disabled={loading[item.id]}
          />
        ))}
      </SubList>
    );
  }