How can I select only one card to be flipped instead of multiple cards-CodePudding

I have made a card component and when I hover over the selected card, all cards rotate. I know it has to do with using one state for all the cards but I am new to react and can't understand how to solve the issue.

const [isFlipped, setIsFlipped] = useState(false);


return (
    <>
      {teams.map((team) => (
        <div
          className={styles.about_us_card}
          key={team.id}
          onm ouseEnter={setIsFlipped(!isFlipped)}
        >
          <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal">
            <div className={styles.about_us_profile_image}>
              <img src="/placeholder.jpeg" alt="profile" />
            </div>
            <div
              className={styles.about_us_profile_info}
              onm ouseLeave={handleFlip}
            >
              <div className={styles.about_us_profile_name}>
                <p className={styles.profile_name}>{team.name}</p>
                <p className={styles.profile_job_title}>{team.title}</p>
              </div>
              <div className={styles.about_us_profile_text}>
                <p>{team.about}</p>
              </div>
            </div>
          </ReactCardFlip>
        </div>
      ))}
    </>
  );
}

Thanks for any help

CodePudding user response：

you can do this

const [flipped, setFlipped] = useState(false);


return (
    <>
      {teams.map((team) => (
        <div
          className={styles.about_us_card}
          key={team.id}
          onm ouseEnter={() => setFlipped(team.id)}
        >
          <ReactCardFlip isFlipped={flipped === team.id} flipDirection="horizontal">
            <div className={styles.about_us_profile_image}>
              <img src="/placeholder.jpeg" alt="profile" />
            </div>
            <div
              className={styles.about_us_profile_info}
              onm ouseLeave={handleFlip}
            >
              <div className={styles.about_us_profile_name}>
                <p className={styles.profile_name}>{team.name}</p>
                <p className={styles.profile_job_title}>{team.title}</p>
              </div>
              <div className={styles.about_us_profile_text}>
                <p>{team.about}</p>
              </div>
            </div>
          </ReactCardFlip>
        </div>
      ))}
    </>
  );
}

CodePudding user response：

I would move everything inside the map into another component like this. In this way you can pass team with props and keep state inside the component without checking id or something

Your component

return (
    <>
      {teams.map((team) => (
         <NewComponent team={team} />
      ))}
    </>
  );
}

NewComponent

  const NewComponent = ({team}) => { 
    
    const [isFlipped, setIsFlipped] = useState(false);
    
    
    return (
        <>
          {teams.map((team) => (
            <div
              className={styles.about_us_card}
              key={team.id}
              onm ouseEnter={setIsFlipped(!isFlipped)}
            >
              <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal">
                <div className={styles.about_us_profile_image}>
                  <img src="/placeholder.jpeg" alt="profile" />
                </div>
                <div
                  className={styles.about_us_profile_info}
                  onm ouseLeave={handleFlip}
                >
                  <div className={styles.about_us_profile_name}>
                    <p className={styles.profile_name}>{team.name}</p>
                    <p className={styles.profile_job_title}>{team.title}</p>
                  </div>
                  <div className={styles.about_us_profile_text}>
                    <p>{team.about}</p>
                  </div>
                </div>
              </ReactCardFlip>
            </div>
          ))}
    </>
}