title: Printing HMTL elements
body: <p>I need to print a list of elements on the click of a button. I have the data in my back-end, and am generating a table of elements with 5 elements in each row through the following:</p>
  <pre><code>const labelDataHTML = (values) =&gt; (
    &lt;table id=&quot;dataTable&quot; style={{ width: &quot;100%&quot; }}&gt;
      &lt;caption&gt;Labels&lt;/caption&gt;
      {_.chunk(values, 5).map((item, index) =&gt; (
        &lt;tr key={`row-${index}`} className={`row`}&gt;
          {index % 5 !== 0
            ? item.map((obj) =&gt; &lt;td&gt;{obj}&lt;/td&gt;)
            : item.map((obj) =&gt; &lt;td&gt;{obj}&lt;/td&gt;)}
        &lt;/tr&gt;
      ))}
    &lt;/table&gt;
  );
  </code></pre>
  <p>I am retrieving the HTML object in another function which I am triggering on click of a button (found this code block on other SO pages):</p>
  <pre><code>const printData = (domElement) =&gt; {
    var printContents = document.querySelector(&quot;table&quot;).innerHTML;
    var originalContents = document.body.innerHTML;
  
    document.body.innerHTML = printContents;
    window.print();
  
    document.body.innerHTML = originalContents;
  };
  </code></pre>
  <p>There are 2 problems with this. 1 is that I lose all the HTML table elements upon clicking the print button, and it just becomes a long list without spaces. Second is that once I click it, all other elements on my page become unresponsive. I have attached a [sandbox][1] as well.</p>
  <p>I'm new to React and javascript in general. Appreciate all the help!</p>
  <p>UPDATE:
  Here's how I solved the problem:
  I found this solution based on a ton of other questions I found on SO:</p>
  <pre><code>const labelDataHTML = values =&gt;
      ReactDOMServer.renderToString(
          &lt;table id=&quot;dataTable&quot; style={{ width: &quot;100%&quot; }}&gt;
              &lt;caption&gt;Labels&lt;/caption&gt;
              {_.chunk(values, 5).map((item, index) =&gt; {
                  return (
                      &lt;tr className={`row`}&gt;
                          {index % 5 !== 0
                              ? item.map(obj =&gt; &lt;td&gt;{obj}&lt;/td&gt;)
                              : item.map(obj =&gt; &lt;td&gt;{obj}&lt;/td&gt;)
                          }
                      &lt;/tr&gt;
                  );
              })}
          &lt;/table&gt;
      );
  
  const PrintLabels = labelData =&gt; {
      let domElement = labelDataHTML(labelData)
      let windowInstance = window.open(&quot;&quot;);
  
      windowInstance.document.write(domElement);
  
      windowInstance.print();
      windowInstance.close();
  };
  </code></pre>
  <p>[1] : <a href="https://codesandbox.io/s/kind-cache-81qgu" rel="nofollow noreferrer">https://codesandbox.io/s/kind-cache-81qgu</a></p>