Convert react function component to react class component

Question

I am learning react and need some help from you guys. I wants need to convert my react hook function to react class component.

React Hook ;

const Card = () => {
const [model, setModel] = useState(false);
const [tempData, setTempdata] = useState([]);
const getData = (img, title, desc, votes, comments, views) => {
    let tempData = [img, title, desc, votes, comments, views];
    setTempdata(item => [1, ...tempData]);
    return setModel(true);
}
return(
    <>
        <section className='py-4 py-lg-5 container'>
            <div className='row justify-content-center align-item-center'>
                {data.cardData.map((item, index) => {
                    return(
                        <div className='col-11 col-md-6 col-lg-3 mx-0 mb-4' key={index} onClick={() => getData(item.imgSrc, item.title, item.desc, item.votes, item.comments, item.views)}>
                            <div className="card p-0 over-flow-hidden h-100 shadow bg-transparent">
                                <img className="card-img-top" src={item.imgSrc} alt=""></img>
                                <div className="card-body bg-dark">
                                    <small className="text-white">{item.title}</small>
                                    <small className="text-muted card-detail">
                                        <small className='text-muted'><FaArrowUp className='card_icons'/>{item.votes}</small>
                                        <small className='text-muted'><FaRegCommentAlt className='card_icons card_icon2' />{item.comments}</small>
                                        <small className='text-muted'><FaRegEye className='card_icons card_icon3' />{item.views}</small>
                                    </small>
                                </div>          
                            </div>
                        </div>
                    )
                })}
                
            </div>
        </section>
        {
            model === true ? <Model img={tempData[1]} title={tempData[2]} desc={tempData[3]} votes={tempData[4]} comments={tempData[5]} views={tempData[5]} hide={() => setModel(false)} />: ''
        }
    </>
)

}

I have tried but it didn't work. Please help me to do this.