@DaveGarrow

Как изменить state у всего списка элементов, кроме одного в React?

Есть список карточек с кнопкой на каждой. По клику на кнопку меняю state и добавляю класс на соответствующую карточку.
Хочется по клику на кнопку скидывать state со всей коллекции и проставлять его только в кликнутой карточке.

Сама карточка:
class ServiceCard extends React.PureComponent {
constructor(props) {
	super(props);

	this.state = {
		isServiceFormOpen: false,
	};
}

clickServiceCardBtn() {
	this.setState({
		isServiceFormOpen: true,
	});
}
render() {
	return (
           <div className={cn("service-card", { "--opened": this.state.isServiceFormOpen })}>
                <button 
                     className="service-card__btn" 
                     onClick={this.clickServiceCardBtn}
                >
                   Кнопка
               </button>
           </div>
         )}
}


И есть родитель с вызовом карточки:
<div className="service-list">
					{serviceCards.map((card, index) => {
						return (
							<React.Fragment key={"service-card" + index}>
								<ServiceCard
									clickServiceCard={this.clickServiceCard}
									extraClass="service-list__card"
								/>
							</React.Fragment>
						);
					})}
</div>
  • Вопрос задан
  • 105 просмотров
Решения вопроса 1
@LEXA_JA
Нужно поднять состояние в родителя:

this.state = {
    openedServiceFormIndex: -1,
  };

  clickServiceCard(index) {
    this.setState(
      prevState => {
        if (index === prevState.openedServiceFormIndex) {
          return {
            openedServiceFormIndex: -1,
          }
        } else {
          return {
            openedServiceFormIndex: index,
          }
        }
      }
    );
  }

  render() {
  <div className="service-list">
          {serviceCards.map((card, index) => {
            return (
              <React.Fragment key={"service-card" + index}>
                <ServiceCard
                  opened={index === this.state.openedServiceCardIndex}
                  clickServiceCard={() => this.clickServiceCard(index)}
                  extraClass="service-list__card"
                />
              </React.Fragment>
            );
          })}
</div>
  }


И убрать из карточки

render() {
  return (
           <div className={cn("service-card", { "--opened": this.props.opened})}>
                <button 
                     className="service-card__btn" 
                     onClick={this.props.clickServiceCard}
                >
                   Кнопка
               </button>
           </div>
         )}
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Подумайте о том, чтобы использовать context API или редакс
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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