StackOverflow #52010444 React

by MatrixTai

HTML

<script src="https://unpkg.com/react@16.5.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.5.1/umd/react-dom.development.js"></script>
<div>
  <a href="#" onClick="window.print();">Print</a>
</div>
<div id="app"></div>

SCSS

@mixin borders {
  border: 1px solid black;
}

%borders {
  @include borders;
}

table {
  border-spacing: 0;
  table-layout: fixed;
  th {
    text-align: center;
  }
  tr {
    th {
      @extend %borders;
    }
    td {
      @extend %borders;
      &.data-name {
        padding: 3px 100px 3px 3px;
      }
      &.data-point {
        text-align: center;
        padding: 3px 10px;
      }
      &.section-name {
        background-color: #999;
      }
    }
  }
  tr.printing-thead {
    display: none;
  }
}

@media print {
  thead {
    display: none;
  }
  tbody {
    display: block;
    tr.printing-thead {
      display: contents;
      font-weight: bold;
      text-align: center;
    }
  }
  .pagebreak {
    height: 0px;
    break-before: always !important;
    page-break-before: always !important;
    page-break-inside: avoid !important;
    td {
      display: none;
    }
  }
}

Babel + JSX

class PageBreakIssues extends React.Component {

    // Render the data points
    renderDataPoint() {
        let dataPoint = [];
        for (let i = 1; i <= 3; i++) {
            let num = (Math.random() * 100).toFixed(2);
            dataPoint.push(
                <td className='data-point' key={ i }>
                    { num < 25 ? null : num }
                </td>
            )
        }
        return dataPoint;
    }

    // Start generating the row data
    renderDataRow() {
        let dataRow = [];
        for (let i = 1; i <= 5; i++) {
            dataRow.push(
                <tr key={ i }>
                    <td className='data-name' colSpan='3' key={i}>Test - { i }</td>
                    { this.renderDataPoint() }
                </tr>
            )
        }
        return dataRow;
    }

    // Start generating table sections with the section name
    // COMMENT THIS OUT TO TRY WITOUT ADDING A BLANK ROW
    renderSections() {
        let sections = [];
        for (let i = 1; i <= 10; i++) {
            sections.push(
                <tbody key={ i }>
                    { i % 2 === 1 ?
                         <tr className='printing-thead'>
                              <td colspan="3">Results</td>
                              <td>1</td>
                              <td>2</td>
                              <td>3</td>
                         </tr> : null
                    }

                    <tr key={ i }>
                        <td colSpan='7' className='section-name' key={i} >
                             Section - { i }
                        </td>
                    </tr>
                    
                    { this.renderDataRow() }
                </tbody>
            );
            if (i % 2 === 0){
            	sections.push(
              	<tbody className='pagebreak'>
                    <tr>
                      <td colSpan='7'></td>
                    </tr>
                  </tbody>
              );
           ...