react-card-flip library on multiple cards

Question

I want to flip a number of cards, but using react-card-flip flips all of them at once. In this code, I have 2 cards, with their front and back. I have tried putting everything under one common Reactcardflip tag but it didn't work too well for me. Any suggestions as to what I should do here?

Here is the code

class index extends React.Component {
  constructor() {
    super();
    this.state = {
      isFlipped: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();
    this.setState((prevState) => ({ isFlipped: !prevState.isFlipped }));
  }

  render() {
    return (
      <ServiceContainer>
        <ServiceCards>
          <ReactCardFlip
            isFlipped={this.state.isFlipped}
            flipDirection="vertical"
          >
            {/* FRONTSIDE */}
            <ServiceCard onClick={this.handleClick}>
              <ServiceTitle>Frontside</ServiceTitle>
            </ServiceCard>
            {/* BACKSIDE */}
            <ServiceCard onClick={this.handleClick}>
              <ServiceTitle>Backside</ServiceTitle>
            </ServiceCard>
          </ReactCardFlip>

          <ReactCardFlip
            isFlipped={this.state.isFlipped}
            flipDirection="vertical"
          >
            {/* FRONTSIDE */}
            <ServiceCard onClick={this.handleClick}>
              <ServiceTitle>Frontside</ServiceTitle>
            </ServiceCard>
            {/* BACKSIDE */}
            <ServiceCard onClick={this.handleClick}>
              <ServiceTitle>Backside</ServiceTitle>
            </ServiceCard>
          </ReactCardFlip>
        </ServiceCards>
      </ServiceContainer>
    );
  }
}

Answer 1

The problem is that you have only one state param that controls all the cards. The solution is to have a Set with all the "flipped" cards. For every cards check if it inside the set.

export default class index extends React.Component {
  constructor() {
    super();
    this.state = {
      flipped: new Set()
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(id) {
    return (e) => {
      e.preventDefault();
      let flipped = new Set(this.state.flipped);
      if (flipped.has(id)) {
        flipped.delete(id);
      } else {
        flipped.add(id);
      }
      this.setState({ flipped });
    };
  }

  render() {
    return (
      <ServiceContainer>
        <ServiceCards>
          <ReactCardFlip
            isFlipped={this.state.flipped.has(1)}
            flipDirection="vertical"
          >
            {/* FRONTSIDE */}
            <ServiceCard onClick={this.handleClick(1)}>
              <ServiceTitle>Frontside</ServiceTitle>
            </ServiceCard>
            {/* BACKSIDE */}
            <ServiceCard onClick={this.handleClick(1)}>
              <ServiceTitle>Backside</ServiceTitle>
            </ServiceCard>
          </ReactCardFlip>

          <ReactCardFlip
            isFlipped={this.state.flipped.has(2)}
            flipDirection="vertical"
          >
            {/* FRONTSIDE */}
            <ServiceCard onClick={this.handleClick(2)}>
              <ServiceTitle>Frontside</ServiceTitle>
            </ServiceCard>
            {/* BACKSIDE */}
            <ServiceCard onClick={this.handleClick(2)}>
              <ServiceTitle>Backside</ServiceTitle>
            </ServiceCard>
          </ReactCardFlip>
        </ServiceCards>
      </ServiceContainer>
    );
  }
}

https://codesandbox.io/s/trusting-thompson-jvq42?file=/src/App.js