I tried simple print function using react-to-print. Parsing error: Unexpected token, expected ","

user_16195110 0
Viewed 156

I tried to print simple table using react-to-print. I got

Parsing error: Unexpected token, expected "," at line no 24 "const".

I am new to react.

import React, { Component } from 'react';

import ReactToPrint, { PrintContextConsumer } from 'react-to-print';

import { ComponentToPrint } from './ComponentToPrint';

export default class Form extends Component {
    
render() {

        return (
          <table>
            <thead>
              <th>column 1</th>
              <th>column 2</th>
              <th>column 3</th>
            </thead>
            <tbody>
              <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
              </tr>
            </tbody>
          </table>
        
        const Example = () => {
            const componentRef = useRef();
            const handlePrint = useReactToPrint({
              content: () => componentRef.current,
            });
          
            return (
              <div>
                <ComponentToPrint ref={componentRef} />
                <button onClick={handlePrint}>Print this out!</button>
              </div>        );
      }
    }
}
reactjs
1 Answers

Sorry for necro posting, but since the answer is missing, let's fix this!

Here your Form is what should be used in place of ComponentToPrint, and of course it must be separate from your Example functional component.

That's how it is!

To explain in more details, you should have two jsx (as an example):

form.jsx
--------

import React, { Component } from 'react';

export default class Form extends Component {

    render() {
        return (
            <table>
                <thead>
                  <th>column 1</th>
                  <th>column 2</th>
                  <th>column 3</th>
                </thead>
                <tbody>
                  <tr>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                  </tr>
                </tbody>
              </table>
        );
    }
}

-- this is your "component to print" (i.e. it returns what will be printed out).

And also you need

example.jsx
-----------

import Form from './form';

import React, { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';

const Example = () => {
    const componentRef = useRef();
    const handlePrint = useReactToPrint({
      content: () => componentRef.current,
    });
    
    return (
      <div>
        <Form ref={componentRef} />
        <button onClick={handlePrint}>Print this out!</button>
      </div>
    );
}

-- this is your component (functional component) with "Print this out!" button which takes ref to your Form as the content for printing.

All that's left is to use your Example somewhere in the App, it will produce the table and a button, clicking the button will call printer dialogue.

user_25187050
Related