PTB-fe/components/Sanksi/BeritaAcara_A.js

import React, { useRef, Component } from 'react';
import { useReactToPrint } from "react-to-print";
import { Row, Col, Button, Card, CardBody } from "reactstrap";
import Head from 'next/head'
import SignatureCanvas from 'react-signature-canvas'
import ComponentToPrint from "./SuratBA";
import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";


class BeritaAcara extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    static getInitialProps = async ({ query }) => {
        return { query };
    };
    content = () => {
        <ComponentToPrint />
    }

    render() {
        return (
            <div>
                <ReactToPrint pageStyle='print' content={() => this.componentRef}>
                    <PrintContextConsumer>
                        {({ handlePrint }) => (
                            <div className=' content-heading border-radius-login'>
                                <span className="btn-radius">
                                    <Button onClick={handlePrint} color className="btn-labeled-4">
                                        <h4 className="p-0 mt-2">Print dan Download</h4>
                                    </Button>
                                </span>
                            </div>

                        )}
                    </PrintContextConsumer>
                </ReactToPrint>
                {/* <div style={{ display: "none" }}> */}
                <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} />
                {/* </div> */}
                {/* <Card>
                    <CardBody>
                        jajajaj
                    </CardBody>
                </Card> */}
            </div >

        );
    }
}
export default BeritaAcara