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!
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