Displaying PDF files in reactjs

Question

I am new to react and I'm trying to display a PDF from a selectable list of links of my PDFs stored inside the src directory. For PDF viewing I used the code from here: https://npm.io/package/react-pdf

Image of my display page

So I have a small table at the half left side of the screen and if I select one of the links it should open the pdf at the right side of the screen. What I only managed was to put the <ViewPdf/> function with an already hardcoded pdf file that's how I displayed it at the right side.

My question is how can I implement such a case where I can click a link from the table and it displays the file at the right side. Here is my code:

import ViewPdf from '../../../components/ViewPdf'
import {Table,Col,Row,Button} from 'reactstrap'

const DocTable = () => {
  return (
    <>
      <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">1-86</th>
          <td><Button color="link">Medical Insurance Claim</Button></td>
          <td>Signed</td>
        </tr>
        <tr>
          <th scope="row">0-34</th>
          <td><Button color="link">Household Insurance</Button></td>
          <td>Signed</td>
        </tr>
        <tr>
          <th scope="row">2-24</th>
          <td><Button color="link">Car Insurance</Button></td>
          <td>Not Signed</td>
        </tr>
      </tbody>
    </Table>
    <br/>
    </>
  );
}

const DocumentList=()=>{

    return (
      <div>
        <Row>
        <Col xs="6">
          {DocTable()}
        </Col>

        <Col xs="6">
       <ViewPdf/>
        </Col>
      </Row>
      </div>
    );
  
}
export default DocumentList

Answer 1

First, you need a button with a handler function to toggle between hide/show situations. also, a state variable is needed to store the current situation:

const DocTable = ({isVisible, onToggle}) => {
  return (
    <>
     // ... rest of the codes

     <button onClick={onToggle}>
       {isVisible? "Hide" : "Show"}
     </button>

     // ... rest of the codes
    </>
  );
}

Now essential parts added to the DocTable component, back to the DocumentList component and implement the state and the handler:

import React, {useState} from 'react';

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

   const handleToggle = () => {
     setIsVisible(prevState => !prevState)
   }
   
    return (
      <div>
        <Row>
        <Col xs="6">
          <DocTable isVisible={isVisible} onToggle={handleToggle}/>
        </Col>

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

Now, with click the button on the DocTable component, handleToggle function will invoke and change the isVisible value, at the end the isVisible variable determine to show ViewPdf component or not.