@Richswitch
junior

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

Привет!
Не могу понять как мне дизейблить кнопку индивидуально когда из 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 вешался только на ту кнопку на которую я кликнул.
  • Вопрос задан
  • 154 просмотра
Пригласить эксперта
Ответы на вопрос 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Очевидно, что так:
render() {
    return (
      <SubList d={visibility}>
        {list.map((item, i) => (
          <Button
            key={i.toString()}
            onClick={this.handleClick}
            disabled={item.isLoading}
          />
        ))}
      </SubList>
    );
  }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы