Having trouble creating a flipcard on Next.js with tsx. The querySelector('.cardflipper') doesn't seem to locate the object and I keep getting this error: "Possibly the object is null". Does anyone know a solution to help my method recognize my class names, or have any other clever way to create a flipcard in tsx?
./components/FlipCard/index.tsx
import { Container } from './styles';
import React from 'react';
function FlipCard() {
const cardflip = document.querySelector('.cardflipper');
cardflip.addEventListener('click', function () {
cardflip.classList.toggle('is-flipped');
});
return (
<Container>
<div className="scene">
<div className="cardflipper">
<div className="card__face card__face--front">front</div>
<div className="card__face card__face--back">back</div>
</div>
</div>
</Container>
);
}
export default FlipCard
./components/FlipCard/styled.ts
import styled from 'styled-components';
export const Container = styled.div`
.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.cardflipper {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
`;