is the following im trying to do possible with the react-flip-package?

Basically my front side is a card with 2 buttons. When i click the one button id like to flip into one backside and if i click to the other button i want to flip on another different backside.

https://codesandbox.io/s/cool-sunset-pfjjln?file=/src/App.js

Heres my code.

import CardContent from '@mui/material/CardContent'
import { IconButton, Box } from '@mui/material'
import TrainIcon from '@mui/icons-material/Train'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import ReactCardFlip from 'react-card-flip'
import CardDestination from './CardDestination'
import CardBrowsePlan from './CardBrowsePlan'
import React from 'react'

function CardTrial() {
    const [isFlipped, setIsFlipped] = React.useState(false)

    const handleClick2 = () => {
        setIsFlipped(!isFlipped)
    }

    return (
        <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal">
            {/* front */}
            
                <Card>
                    <CardContent>
                        <IconButton onClick={handleClick2}>
                            <TrainIcon sx={{ height: 25, width: 25 }} />
                        </IconButton>

                        <IconButton onClick={handleClick2}>
                            <ExpandMoreIcon sx={{ height: 25, width: 25 }} />
                        </IconButton>
                    </CardContent>
                </Card>
            

            {/* back */}

            <Box>
                <CardDestination flip2={handleClick2} />
                <CardBrowsePlan flip2={handleClick2} />
            </Box>
        </ReactCardFlip>
    )
}

export default CardTrial

Right now i have my children in a box and obviously they both turn when i click any of the 2 buttons. (also passing props so they can turn back) How do i go about this? Thanks!

CodePudding user response：

You can make one more state to tell React which card have to be flipped.

function CardTrial() {
    const [isFlipped, setIsFlipped] = React.useState(false)
    const [isDestinationCard, setIsDestinationCard] = React.useState(false)

    const handleClick1 = () => {
        setIsDestinationCard(true)
        setIsFlipped(!isFlipped)
    }
    const handleClick2 = () => {
        setIsDestinationCard(false)
        setIsFlipped(!isFlipped)
    }

    return (
        <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal">
            {/* front */}
            
                <Card>
                    <CardContent>
                        <IconButton onClick={handleClick1}>
            {/* this button will open CardDestination */}
                            <TrainIcon sx={{ height: 25, width: 25 }} />
                        </IconButton>

                        <IconButton onClick={handleClick2}>
            {/* this button will open CardBrowsePlan */}
                            <ExpandMoreIcon sx={{ height: 25, width: 25 }} />
                        </IconButton>
                    </CardContent>
                </Card>

            {/* back */}

            <Box>
                {isDestinationCard ? <CardDestination flip2={handleClick1} /> : <CardBrowsePlan flip2={handleClick2} />}
            </Box>
        </ReactCardFlip>
    )
}

export default CardTrial

Or, you can make your state as a string which will tell you what card to open or will close on empty value

function CardTrial() {
    const [CardTrigger, setCardTrigger] = React.useState("")

    const handleClick = card => {
        setCardTrigger(card)
    }
    return (
        <ReactCardFlip isFlipped={!!CardTrigger.length} flipDirection="horizontal">
            {/* front */}
            
                <Card>
                    <CardContent>
                        <IconButton onClick={() => handleClick("destination")}>
            {/* this button will open CardDestination */}
                            <TrainIcon sx={{ height: 25, width: 25 }} />
                        </IconButton>

                        <IconButton onClick={() => handleClick("browsePlan")}>
            {/* this button will open CardBrowsePlan */}
                            <ExpandMoreIcon sx={{ height: 25, width: 25 }} />
                        </IconButton>
                    </CardContent>
                </Card>

            {/* back */}

            <Box>
                {CardTrigger === "destination" && <CardDestination flip2={() => handleClick("")} />}
                {CardTrigger === "browsePlan" && <CardBrowsePlan flip2={() => handleClick("")} />}
            </Box>
        </ReactCardFlip>
    )
}

export default CardTrial