React jsx class is showing the data twice after adding the render pdf session

Question

I have rendered data from database and displayed in the page I created.( It showed all the data correctly once) Then I added generate as pdf session under that class and it is successfully giving the data as pdf. But in the page the data is showing twice. I want the data show only one time. Can anyone identify the wrong in my coding please?

My page code which need to save as pdf

Which is a .jsx page

EmployeePDF.jsx

import React, { useRef } from 'react';
import axios from 'axios';
import { useReactToPrint } from 'react-to-print';
import { render } from '@testing-library/react';



export default class EmployeePDF extends React.Component {
constructor(props) {
    super(props);
    this.state = { 
        data:[]
     }
}

componentDidMount(){
    this.fetchEmpDetails();
} 

fetchEmpDetails = () =>{
    var url = "http://127.0.0.1:8000/EmployeeDetail-list/";
    axios.get(url).then(res => {
        const data = res.data;
        this.setState({data});
    })       
};

render() { 
    return ( 
            <div className="row">                
                <div className="col main1" style={{height:"100%"}}>
                    <br></br>
                    <h1 style={{color: "DodgerBlue", fontSize: '30px',fontWeight:"bold"}}><center>EMPLOYEE DETAILS</center></h1>
                    <div>
                        <div className="table-responsive">
                        <table className="table" style={{fontSize:"10px"}}>
                            <thead className="theadss">
                            <tr>
                                <th>Employee ID</th>
                                <th>Employee Name</th>                                  
                                <th>Primary Phone</th>
                                <th>Secondary Phone</th>
                                <th>Position</th>
                                <th>Address</th>
                                <th>Email</th>
                                <th>Trained Years</th>
                                <th>Joined Date</th>    
                            </tr>
                            </thead>
                            <tbody >
                            {this.state.data.map(user =>{
                                return(
                                <tr>
                                <td>{user.emp_det_id}</td>
                                <td>{user.employee_name}</td>
                                <td>{user.primary_phone}</td>
                                <td>{user.secondary_phone}</td>
                                <td>{user.position}</td>
                                <td>{user.address}</td>
                                <td>{user.email}</td>
                                <td>{user.trained_years}</td>
                                <td>{user.joined_date}</td>
                                </tr>
                                );
                            })}
                            </tbody>
                        </table>
                        </div>
                    </div>
                </div>   
            </div>
     );
}}

//Printing or saving as PDF
const Example = () => {
const componentRef = useRef();
const handlePrint = useReactToPrint({
  content: () => componentRef.current,
});

return (
  <div>
    <EmployeePDF ref={componentRef} />
    <button onClick={handlePrint}>Print or Save as PDF</button>
    <br></br>
  </div>  
);};render(<Example/>,document.querySelector("#root"));

This is the output I am getting I want Employee Details to show one time with the button "Print or save as pdf"

When I select the print or save as pdf button it is saving the data one time

(I have used react-to-print library)

Answer 1

Can you use render of ReactDom

import ReactDOM from "react-dom";
ReactDOM.render(<Example/>,document.querySelector("#root"));