i want to print the model box

Question

i want to print the model box of the page but without the print button itself. I have tried this code but it didn't work. I am new to react . help.

the code is as below:

import React from "react";
import "./Bill.css";
import logo from "./images/logo.png";
import { Link, useHistory } from "react-router-dom";
import ClientDashboard from "./ClientDashboard";
import BillTable from "./BillTable";

function Bill() {
  const history = useHistory();

  const logout = (e) => {
    localStorage.removeItem("token");
    history.push("/");
  };

  if (!localStorage.getItem("token")) {
    history.push("/");
  }

  return (
    <div className="modal__bill">
      <div className="bill__navbar">
        <Link to="/clientdashboard" className="header__link">
          <img className="navbar__logo" src={logo} alt="logo" />
        </Link>
      </div>
      <div className="box">
        <BillTable />
        <button className="print__button" onClick={() => window.print()}>
          Print
        </button>
      </div>
    </div>
  );
}

export default Bill;

Answer 1

Have you tried to hide the button by css?

How do I hide an element when printing a web page?

In your case you can add

@media print {
  .print__button {
    display: none !important;
  }
}