title: change state before and after print for displaying only on print
body: <p>Tested with browser Chrome (version 84.0.4147.125)</p>
  <p><strong>What I am trying to do:</strong></p>
  <p>To get the student's <code>&lt;h2&gt;name&lt;/h2&gt;</code> to appear at the top only when print is clicked, after the print modal goes away(print/save/cancel) the state should return back to the way it was.(students <code>&lt;h2&gt;name&lt;/h2&gt;</code> should be hidden at the top again.)</p>
  <p><strong>The full code:</strong> <a href="https://codesandbox.io/s/pagination-tables-print-demo-59u37" rel="nofollow noreferrer">https://codesandbox.io/s/pagination-tables-print-demo-59u37</a></p>
  <p><strong>The Tables Page:</strong></p>
  <pre><code>import React, { useState } from 'react';
  import { Helmet } from 'react-helmet'
  
  // Components
  import StudentStudyDetails from '../Components/TablesPage/StudentStudyDetails.js';
  
  // Test Data
  import { johnDoeTwoWeeks } from '../Tests/index.js';
  
  const Tables = () =&gt; {
    const [inPrintPreview, setInPrintPreview] = useState(false);
  
    const print = (ev) =&gt; {
      ev.preventDefault();
  
      Promise.resolve(setInPrintPreview(true))
        .then(() =&gt; {
          let printContents = document.getElementById(&quot;print-report-student-div&quot;).innerHTML;
          let originalContents = document.body.innerHTML;
          document.body.innerHTML = printContents;
          window.print();
          document.body.innerHTML = originalContents;
        })
    }
  
    return (
      &lt;div className=&quot;page-container&quot;&gt;
        &lt;Helmet&gt;
            &lt;title&gt;Tables-Demo&lt;/title&gt;
            &lt;meta name=&quot;description&quot; content=&quot;Nested component&quot; /&gt;
        &lt;/Helmet&gt;
        &lt;h1 className=&quot;h1-reports-title&quot;&gt;Tables&lt;/h1&gt;
        &lt;div&gt;
          {&lt;button type=&quot;button&quot; onClick={ev =&gt; print(ev)} className=&quot;btn-reports-submit&quot;&gt;Print&lt;/button&gt;}
          {&lt;StudentStudyDetails tableData={johnDoeTwoWeeks} inPrintPreview={inPrintPreview} /&gt;}
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default Tables;
  </code></pre>
  <hr />
  <p>The Table Component:</p>
  <pre><code>import React from 'react';
  
  // Globals
  import { reportsBackendResponses, reportsBackendAttendence } from '../../Globals/index.js';
  
  const StudentReportTable = props =&gt; {
    const { tableData, reportElement, inPrintPreview } = props;
    return (
      &lt;div id=&quot;print-report-student-div&quot; className=&quot;div-reports-tbl&quot;&gt;
        &lt;h2 className={inPrintPreview ? &quot;h2-print-title-name&quot;: &quot;display-none&quot;}&gt;{tableData.lastName},&amp;nbsp;{tableData.firstName}&lt;/h2&gt;
        &lt;table id=&quot;print-report-student-table-center&quot; className=&quot;tbl-reports&quot;&gt;
          &lt;tbody&gt;
            &lt;tr className=&quot;tbl-reports-header-row&quot;&gt;
              &lt;th&gt;Week&amp;nbsp;ending:&lt;br /&gt;{tableData.weeks[reportElement].weekEnding}&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th colSpan=&quot;2&quot;&gt;Teacher:&lt;br /&gt;{tableData.tutorName}&lt;/th&gt;
              &lt;th&gt;{tableData.weeks[reportElement].weekTotalHours}&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr className=&quot;tbl-reports-title-row&quot;&gt;
              &lt;th&gt;Date&lt;/th&gt;
              &lt;th&gt;Response&lt;/th&gt;
              &lt;th&gt;Tutor Hours&lt;/th&gt;
              &lt;th&gt;Credit Value&lt;/th&gt;
              &lt;th&gt;Attendence&lt;/th&gt;
              &lt;th&gt;Study Value&lt;/th&gt;
              &lt;th&gt;Total&lt;/th&gt;
            &lt;/tr&gt;
            {tableData.weeks[reportElement].daysInfo.map((row, index) =&gt; 
              &lt;tr key={index} className=&quot;tbl-reports-record-row&quot;&gt;
                &lt;td&gt;{row.dayDate}&lt;/td&gt;
                &lt;td&gt;
                  {row.response.toLowerCase() === reportsBackendResponses.notAsked ? 
                    &lt;p className=&quot;p-reports-not-asked&quot;&gt;{row.response}&lt;/p&gt; : 
                    (row.response.toLowerCase() === reportsBackendResponses.worked ?
                      &lt;p className=&quot;p-reports-worked&quot;&gt;{row.response}&lt;/p&gt; : 
                      (row.response.toLowerCase() === reportsBackendResponses.absent ?
                        &lt;p className=&quot;p-reports-absent&quot;&gt;{row.response}&lt;/p&gt; : 
                        (row.response.toLowerCase() === reportsBackendResponses.refused ?
                          &lt;p className=&quot;p-reports-refused&quot;&gt;{row.response}&lt;/p&gt; :
                          &lt;p className=&quot;p-reports-default&quot;&gt;{row.response}&lt;/p&gt;
                        )
                      )
                    )
                  }
                &lt;/td&gt;
                &lt;td&gt;{row.tutorHours}&lt;/td&gt;
                &lt;td&gt;{row.creditValue}&lt;/td&gt;
                &lt;td&gt;
                  {row.attendence.toLowerCase() === reportsBackendAttendence.cancelled ? 
                    &lt;p className=&quot;p-reports-cancelled&quot;&gt;{row.attendence}&lt;/p&gt; : 
                    (row.attendence.toLowerCase() === reportsBackendAttendence.present ?
                      &lt;p className=&quot;p-reports-present&quot;&gt;{row.attendence}&lt;/p&gt; : 
                      (row.attendence.toLowerCase() === reportsBackendAttendence.noShow ?
                        &lt;p className=&quot;p-reports-no-show&quot;&gt;{row.attendence}&lt;/p&gt; : 
                        (row.attendence.toLowerCase() === reportsBackendAttendence.notPlanned ?
                          &lt;p className=&quot;p-reports-not-planned&quot;&gt;{row.attendence}&lt;/p&gt; :
                          &lt;p className=&quot;p-reports-default&quot;&gt;{row.attendence}&lt;/p&gt;
                        )
                      )
                    )
                  }
                &lt;/td&gt;
                {row.studyValue ? &lt;td&gt;{row.studyValue}&lt;/td&gt; : &lt;td style={{color: &quot;#CCCCCC&quot;}}&gt;-&amp;nbsp;-&amp;nbsp;-&lt;/td&gt;}
                &lt;td&gt;{row.totalDayHours}&lt;/td&gt;
              &lt;/tr&gt;
            )}
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    )
  }
  
  export default StudentReportTable;
  </code></pre>
  <hr />
  <p><strong>The CSS:</strong></p>
  <pre><code>/*---------------------------------------- Globals ----------------------------------------*/
  html,
  body,
  #root {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: auto!important;
  }
  * {
  box-sizing: inherit !important;
  }
  *:before, *:after {
  box-sizing: inherit !important;
  }
  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
  }
  
  h1,h2,h3,h4,h5,h6 {
    margin: 0;
  }
  footer {
    background-color: #CCCCCC;
    color: black;
    font-size: 16px;
    padding: 2em;
    display: flex;
    flex-direction: row;
    margin-top: 4em;
  }
  
  @media print {
    html, body {
      height: initial !important;
      overflow: initial !important;
      -webkit-print-color-adjust: exact;
    }
  }
  
  @media print {
    #print-report-student-table-center {
      position:absolute;
      z-index:15;
      left: 50%;
      margin-left: -462px; /* half of table width size */
    }
  }
  
  @page {
    size: auto;
    margin-top: 20mm;
  }
  /*---------------------------------------- General ----------------------------------------*/
  .absolute-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .z-index-5 {
    z-index: 5;
  }
  .position-relative {
    position: relative;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .display-none {
    display: none;
  }
  /*---------------------------------------- Classes ----------------------------------------*/
  .app {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
  }
  .btn-pagination-selected-tab {
    width: 60px;
    background-color: #01A3E0;
    margin-right: 10px;
    padding: 12px 0;
    border: none;
    border-radius: 5px;
  }
  .btn-pagination-unselected-tab {
    width: 60px;
    background-color: #85C8E9;
    margin-right: 10px;
    padding: 12px 0;
    border: none;
    border-radius: 5px;
  }
  .btn-pagination-unselected-tab:hover {
    background-color: #4AB0E1;
  }
  .btn-reports-submit {
    background-color: #01A3E0;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border: 2px solid #01A3E0;
    border-radius: 4px;
    transition: background-color 0.3s;
    outline: none!important;
    box-shadow: none!important;
    text-decoration: none;
    margin-bottom: 40px;
    float: right;
  }
  .btn-reports-submit:hover {
    background-color: white;
    color: #01A3E0;
    text-decoration: none;
  }
  .btn-reports-submit:active {
    background-color: #01A3E0;
    color: white;
    text-decoration: none;
  }
  .div-pagination {
    display: flex;
    user-select: none;
  }
  .div-reports-details-container {
    display: block;
    max-width: 950px;
    margin-right: 50px;
  }
  .div-reports-student {
    display: flex;
    width: 100%;
  }
  .div-reports-student-container {
    display: block;
    margin-top: 68px;
  }
  .div-reports-student-photo-name {
    border-top: 2px solid #DDDDDD;
    border-right: 2px solid #DDDDDD;
    border-left: 2px solid #DDDDDD;
    text-align: center;
    padding: 30px 70px;
  }
  .div-reports-student-photo-name img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    background-repeat: no-repeat;
  }
  .div-reports-student-photo-name p {
    margin: 30px 0 0;
    color: #01A3E0;
    font-weight: 600;
    font-size: 18px;
  }
  .div-reports-student-total {
    border-right: 2px solid #01A3E0;
    background-color: #01A3E0;
    text-align: center;
    color: white;
    padding: 20px 0;
  }
  .div-reports-tbl {
    width: 100%;
    margin-top: 20px;
  }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 40px;
  }
  .h1-reports-title {
    margin: 10px 0 20px;
  }
  .h2-print-title-name {
    text-align: center;
    margin-bottom: 40px;
  }
  .header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding: 40px;
    background-color: #CCCCCC;
  }
  .header a {
    margin-right: 15px;
  }
  .p-reports-not-asked {
    margin: 0;
    padding: 5px 0;
    background-color: #FFEDBC;
    border: 2px solid #CCCCCC;
    border-radius: 5px;
  }
  .p-reports-worked {
    margin: 0;
    padding: 5px 0;
    background-color: #CBFCCB;
    border: 2px solid #CCCCCC;
    border-radius: 5px;
  }
  .p-reports-absent {
    margin: 0;
    padding: 5px 0;
    background-color: #FBC7C5;
    border: 2px solid #CCCCCC;
    border-radius: 5px;
  }
  .p-reports-refused {
    margin: 0;
    padding: 5px 0;
    background-color: #DDDDDD;
    border: 2px solid #CCCCCC;
    border-radius: 5px;
  }
  .p-reports-cancelled {
    margin: 0;
    padding: 5px 10px;
    background-color: #FFEDBC;
    border: 2px solid #CCCCCC;
    border-radius: 5px;
  }
  .p-reports-present {
    margin: 0;
    padding: 5px 10px;
    background-color: #CBFCCB;
    border: 2px solid #CCCCCC;
    border-radius: 5px;
  }
  .p-reports-no-show {
    margin: 0;
    padding: 5px 10px;
    background-color: #FBC7C5;
    border: 2px solid #CCCCCC;
    border-radius: 5px;
  }
  .p-reports-not-planned {
    margin: 0;
    padding: 5px 10px;
    border: 2px solid #CCCCCC;
    border-radius: 5px;
  }
  .p-reports-default {
    margin: 0;
    padding: 5px 10px;
    border: 2px solid #CCCCCC;
    border-radius: 5px;
  }
  .page-container {
    display: block;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
  }
  .pages-container {
    display: block;
    width: 100%;
    flex: 1;
  }
  .tbl-reports {
    border-bottom: 2px solid #CCCCCC;
    border-collapse: separate; /* Don't collapse */
    border-spacing: 0;
    text-align: left;
  }
  .tbl-reports-header-row th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 10px 20px;
    background-color: #01A3E0;
    font-size: 18px;
    border-top: 2px solid #01A3E0;
  }
  .tbl-reports-header-row th:first-child {
    width: 140px;
    color: #FFFFFF;
    border-left: 2px solid #01A3E0;
    padding-left: 30px;
  }
  .tbl-reports-header-row th:nth-child(2) {
    width: 140px;
  }
  .tbl-reports-header-row th:nth-child(3) {
    width: 90px;
  }
  .tbl-reports-header-row th:nth-child(4) {
    width: 120px;
  }
  .tbl-reports-header-row th:nth-child(5) {
    width: 155px;
    color: #FFFFFF;
    text-align: end;
  }
  .tbl-reports-header-row th:nth-child(6) {
    width: 140px;
  }
  .tbl-reports-header-row th:last-child {
    color: #FFFFFF;
    border-right: 2px solid #01A3E0;
    border-left: 2px solid #CCCCCC;
    width: 110px;
    text-align: end;
  }
  .tbl-reports-title-row th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 10px 20px;
    background-color: #EBF6FC;
    font-size: 18px;
  }
  .tbl-reports-title-row th:first-child {
    width: 140px;
    border-left: 2px solid #CCCCCC;
    padding-left: 30px;
  }
  .tbl-reports-title-row th:nth-child(2) {
    width: 140px;
  }
  .tbl-reports-title-row th:nth-child(3) {
    width: 90px;
  }
  .tbl-reports-title-row th:nth-child(4) {
    width: 120px;
  }
  .tbl-reports-title-row th:nth-child(5) {
    width: 155px;
  }
  .tbl-reports-title-row th:nth-child(6) {
    width: 140px;
  }
  .tbl-reports-title-row th:last-child {
    border-right: 2px solid #CCCCCC;
    border-left: 2px solid #CCCCCC;
    width: 110px;
    text-align: end;
  }
  .tbl-reports-record-row {
    border-bottom: 2px solid #CCCCCC;
  }
  .tbl-reports-record-row td {
    padding: 10px 20px;
    border-bottom: 2px solid #CCCCCC;
  }
  .tbl-reports-record-row:last-child td {
    border-bottom: none;
  }
  .tbl-reports-record-row td:first-child {
    border-left: 2px solid #CCCCCC;
    padding-left: 30px;
  }
  .tbl-reports-record-row td:not(:first-child) {
    text-align: center;
  }
  .tbl-reports-record-row td:nth-child(5) {
    text-align: left;
  }
  .tbl-reports-record-row td:nth-child(6) {
    text-align: left;
    padding-left: 50px;
  }
  .tbl-reports-record-row td:last-child {
    border-right: 2px solid #CCCCCC;
    border-left: 2px solid #CCCCCC;
    text-align: end;
  }
  </code></pre>
  <hr />
  <p>I'm new with handling state during print outs, so any help would be much appreciated.</p>
  <p>My guess is the change would need to be somewhere in this snippet:</p>
  <pre><code>    Promise.resolve(setInPrintPreview(true))
        .then(() =&gt; {
          let printContents = document.getElementById(&quot;print-report-student-div&quot;).innerHTML;
          let originalContents = document.body.innerHTML;
          document.body.innerHTML = printContents;
          window.print();
          document.body.innerHTML = originalContents;
        })
  </code></pre>
  <p><strong>Note:</strong> I also noticed an issue where the pagination stops working after the print modal goes away, which tells me javascript is getting hung up on something.</p>