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

Question

[Сергей]

Есть список карточек с кнопкой на каждой. По клику на кнопку меняю 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>

Answer 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>
         )}
}

Comments

[Сергей]

Спасибо! Правда, я не запустил сие пока что на проекте, что-то не получилось, но в sandbox работает. https://codesandbox.io/s/fervent-fog-fkqu6?file=/s...

Только поменять название стейта opened={index === this.state.openedServiceCardIndex} - на openedServiceFormIndex

Answer 2

[Владимир]

Подумайте о том, чтобы использовать context API или редакс