title: React print a component
body: <p>There is a 'Print' button on SaleInvoice.js which shows the Modal containing Report.js. </p>
  
  <p>Report.js is created only to describe how and what should be displayed in the printed page. </p>
  
  <p>Report.js has a button 'Print' which opens the Print Preview in the browser. </p>
  
  <p>How do I make the 'Print' button on SaleInvoice.js directly open the Print Preview in the browser?</p>
  
  <blockquote>
    <p>SaleInvoice.js</p>
  </blockquote>
  
  <pre><code>...
              &lt;button
                style={{marginRight: '200px'}}
                onClick={() =&gt; this.setState({printView: true})}&gt;
                Print
              &lt;/button&gt;
              {this.state.printView ? (
                &lt;Modal
                  type="Print"
                  {...this.props}
                  show={this.state.printView}
                  modalClosed={() =&gt; this.setState({printView: false})}
                /&gt;
              ) : null}
  ...
  </code></pre>
  
  <blockquote>
    <p>Report.js</p>
  </blockquote>
  
  <pre><code>import React from 'react';
  import styles from './SaleInvoice.module.css';
  
  const SaleInvoice = props =&gt; {
    const {customerName} = props;
    const rows = props.lineItems;
    const alignRightMarginRight = [styles.alignRight, styles.marginRight].join(
      ' ',
    );
    const {amountBeforeFreight, freight, amountAfterFreight} = props;
    const reverseDateString = date =&gt; {
      let [yyyy, mm, dd] = date.split('-');
      return dd + '-' + mm + '-' + yyyy;
    };
    const renderContent = () =&gt; {
      let i = 0;
      let contentRows = (i, d) =&gt; {
        return (
          &lt;React.Fragment&gt;
            &lt;td className={styles.serialNumber}&gt;{i}&lt;/td&gt;
            &lt;td className={styles.productName}&gt;{d.product_name}&lt;/td&gt;
            &lt;td className={alignRightMarginRight}&gt;{d.product_qty}&lt;/td&gt;
            &lt;td className={alignRightMarginRight}&gt;{d.product_unit}&lt;/td&gt;
            &lt;td className={alignRightMarginRight}&gt;{d.product_rate}&lt;/td&gt;
            &lt;td className={alignRightMarginRight}&gt;{d.product_disc}&lt;/td&gt;
            &lt;td className={alignRightMarginRight}&gt;{d.sub_total}&lt;/td&gt;
          &lt;/React.Fragment&gt;
        );
      };
      return rows.map(d =&gt; {
        i++;
        if (i === rows.length) {
          return null;
        }
        if (i % 10 === 0) {
          return (
            &lt;tr key={i} className={styles.pagebreak}&gt;
              {contentRows(i, d)}
            &lt;/tr&gt;
          );
        } else {
          return &lt;tr key={i}&gt;{contentRows(i, d)}&lt;/tr&gt;;
        }
      });
    };
  
    return (
      &lt;React.Fragment&gt;
        &lt;div className={styles.all}&gt;
          &lt;div className={[styles.header].join(' ')}&gt;
            &lt;button className={styles.hideInPrint} onClick={window.print}&gt;
              Print
            &lt;/button&gt;
            &lt;button className={styles.hideInPrint} onClick={props.modalClosed}&gt;
              Close
            &lt;/button&gt;
            &lt;h5 className={styles.docTitle}&gt;Estimate&lt;/h5&gt;
            &lt;h6 className={styles.customerName}&gt;
              {customerName}
              &lt;span className={styles.date}&gt;
                {reverseDateString(props.date.split('T')[0])}
              &lt;/span&gt;
            &lt;/h6&gt;
          &lt;/div&gt;
          &lt;table className={styles.content}&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;td&gt;No&lt;/td&gt;
                &lt;td&gt;Name&lt;/td&gt;
                &lt;td className={alignRightMarginRight}&gt;Qty&lt;/td&gt;
                &lt;td className={alignRightMarginRight}&gt;Unit&lt;/td&gt;
                &lt;td className={alignRightMarginRight}&gt;Rate&lt;/td&gt;
                &lt;td className={alignRightMarginRight}&gt;Disc&lt;/td&gt;
                &lt;td className={alignRightMarginRight}&gt;Total&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody className={styles.content}&gt;{renderContent()}&lt;/tbody&gt;
          &lt;/table&gt;
          &lt;div className={styles.footer}&gt;
            &lt;div className={styles.foot}&gt;
              &lt;label&gt;Amount:&lt;/label&gt;
              &lt;label className={styles.amount}&gt;
                {amountBeforeFreight.toFixed(2)}
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;div className={styles.foot}&gt;
              &lt;label&gt;Freight:&lt;/label&gt;
              &lt;label className={styles.amount}&gt;
                {freight ? freight.toFixed(2) : 0}
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;div className={styles.foot}&gt;
              &lt;label&gt;Final Amount:&lt;/label&gt;
              &lt;label className={styles.amount}&gt;
                {amountAfterFreight.toFixed(2)}
              &lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  export default SaleInvoice;
  </code></pre>