Displaying multiple PDF files in reactjs

Question

I am new to react and I have multiple pdfs that I am trying to display depending on the link selected. I have managed to display a PDF from a selectable list of links of my PDFs stored inside the src directory. However, the same pdf appears for all the links. When I try to display different pdfs, I get this error:

(TypeError: Cannot read properties of null (reading 'onToggle')) .

For PDF viewing I used the code from here:

https://npm.io/package/react-pdf

My question is how can I implement such a case where I can display a different pdf depending on the link I would have clicked.

My code to display the pdf depending on the link looks like this:

import React, { Component, useState } from "react";
import { Document, Page } from "react-pdf";
import myPdf from '../../../components/pdf/signed.pdf'
import ViewPdf from '../../../components/ViewPdf'
import ViewSecondPdf from '../../../components/ViewPdf2'
import ViewThirdPdf from '../../../components/ViewPdf3'
import AllPages from "src/components/pdf/AllPages";
import { Table, Col, Row, Button } from 'reactstrap'
import { Link } from "react-router-dom";

const Display = (props) => {
  <div>
    <AllPages pdf={props} />
  </div>
}

const DocTable = ({ onToggle }) => {
  return (
    <>
      <Link to="/sign" className="mb-2"><span className="material-icons">keyboard_backspace</span></Link><br />
      <span style={{ fontWeight: 'bold' }}>Documents</span><br />
      <Table bordered hover size="sm">
        <thead>
          <br />
          <tr>
            <th>ID</th>
            <th>Document Name</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">001</th>
            <td><Button id="MICButton" name="MICButton" color="link" onClick={onToggle}>Vehicle Insurance Claim</Button></td>
            <td>Signed</td>
          </tr>
          <tr>
            <th scope="row">002</th>
            <td><Button id="HIButton" name="HIButton" color="link" onClick={onToggle}>Household Insurance Contract</Button></td>
            <td>Signed</td>
          </tr>
          <tr>
            <th scope="row">003</th>
            <td><Button id="CIButton" name="CIButton" color="link" onClick={onToggle}>Vehicle Insurance Contract</Button></td>
            <td>Not Signed</td>
          </tr>
        </tbody>
      </Table>
      <br />
    </>
  );
}

const DocumentList = () => {
  const [isVisible, setIsVisible] = useState(false) // false to hide the PDF for the first time

  const handleToggle = () => {
    setIsVisible(prevState => !prevState)
  }

  if(document.getElementById('MICButton').onToggle == true){
    return (
      <div>
        <Row>
          <Col xs="6">
            <DocTable isVisible={isVisible} onToggle={handleToggle} />
          </Col>

          <Col xs="6">
              {isVisible && <ViewPdf />}
          </Col>
        </Row>
      </div>
    );
  }


  if(document.getElementById('HIButton').onToggle == true){
    return (
      <div>
        <Row>
          <Col xs="6">
            <DocTable isVisible={isVisible} onToggle={handleToggle} />
          </Col>

          <Col xs="6">
              {isVisible && <ViewSecondPdf />}
          </Col>
        </Row>
      </div>
    );
  }


  if(document.getElementById('CIButton').onToggle == true){
    return (
      <div>
        <Row>
          <Col xs="6">
            <DocTable isVisible={isVisible} onToggle={handleToggle} />
          </Col>

          <Col xs="6">
              {isVisible && <ViewThirdPdf />}
          </Col>
        </Row>
      </div>
    );
  }
  

}
export default DocumentList

This is the image of my table without the error.

score 0 · Answer 1 · answered Oct 28 '21 at 13:24

You could pass the PDF ID to the onToggle and then, depending on it, display the required component

const DocTable = ({ onToggle }) => {
    return (
        <>
            <Link to="/sign" className="mb-2">
                <span className="material-icons">keyboard_backspace</span>
            </Link>
            <br />
            <span style={{ fontWeight: 'bold' }}>Documents</span>
            <br />
            <Table bordered hover size="sm">
                <thead>
                    <br />
                    <tr>
                        <th>ID</th>
                        <th>Document Name</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">001</th>
                        <td>
                            <Button id="MICButton" name="MICButton" color="link" onClick={() => onToggle('MICButton')}>
                                Vehicle Insurance Claim
                            </Button>
                        </td>
                        <td>Signed</td>
                    </tr>
                    <tr>
                        <th scope="row">002</th>
                        <td>
                            <Button id="HIButton" name="HIButton" color="link" onClick={() => onToggle('HIButton')}>
                                Household Insurance Contract
                            </Button>
                        </td>
                        <td>Signed</td>
                    </tr>
                    <tr>
                        <th scope="row">003</th>
                        <td>
                            <Button id="CIButton" name="CIButton" color="link" onClick={() => onToggle('CIButton')}>
                                Vehicle Insurance Contract
                            </Button>
                        </td>
                        <td>Not Signed</td>
                    </tr>
                </tbody>
            </Table>
            <br />
        </>
    );
};

const DocumentList = () => {
    const [isVisible, setIsVisible] = useState(false); // false to hide the PDF for the first time
    const [activeDoc, setActiveDoc] = useState(null);

    const handleToggle = (docID) => {
        setIsVisible((prevState) => !prevState);
        setActiveDoc(docID);
    };
    return (
        <div>
            <Row>
                <Col xs="6">
                    <DocTable isVisible={isVisible} onToggle={handleToggle} />
                </Col>
                <Col xs="6">
                    {(() => {
                        if(!isVisible){
                            return null
                        }
                        switch (activeDoc) {
                            case 'MICButton':
                                return <ViewPdf />;
                            case 'HIButton':
                                return <ViewSecondPdf />;
                            case 'CIButton':
                                return <ViewThirdPdf />;
                            default:
                                return null;
                        }
                    })()}
                </Col>
            </Row>
        </div>
    );
};

Displaying multiple PDF files in reactjs

1 Answers1