How to render Modal from inside React Table using react-data-table-component

Question

I'm trying to render a Modal, From React table. using a react-data-table-component

docs here

That's how I'm trying.

// Related part from table
const tableColumns = [
 {
    // name: 'More',
    sortable: false,
    width: '80px',

    selector: (row) => {
      return (
        <div style={{ paddingTop: '80px' }}>
          {' '}
           // Problematic part
          <Button color="primary" onClick={() => <MapModal containerNumber={row.container_number} show={true} />}>
            Show
          </Button>
          <p className="pb-1">
            <MapPin />
          </p>
         
          <p className="pb-1">
            <Link to={`/shipment/${row.id}/`}>
              <Eye />
            </Link>
          </p>
        </div>
      )
    }
  },
]

Modal Component that I want to render. on onClick event.

import React, { Fragment } from 'react'
import { Modal, ModalHeader, ModalBody } from 'reactstrap'

const MapModal = ({ containerNumber, show }) => {
  return (
    <Fragment>
      <Modal isOpen={show} className="modal-dialog-centered modal-xl">
        <ModalHeader className="bg-transparent" toggle={() => setShow(!show)}></ModalHeader>
        <ModalBody>
          <iframe
            src={`https:/fakepath/where-is-my-container/${containerNumber}`}
            id="id"
            
          ></iframe>
        </ModalBody>
      </Modal>
    </Fragment>
  )
}

export default MapModal

Using this method, I'm not able to trigger Modal Show, so how can I fix this ? and what could be the problem?

Answer 1

The MapModal component could be at the same level of the react datatable component, the show and container_number vars could be saved into a stateHook.

In this way modal will be also rendered correctly (even with animations because the <Modal> will be not unmounted)

const Wrapper = () => {
    const [showModal, setShowModal] = useState(false);
    const [containerNumber, setcontainerNumber] = useState();

    // Related part from table
    const tableColumns = [
        {
            // name: 'More',
            sortable: false,
            width: '80px',

            selector: (row) => {
              return (
                <div style={{ paddingTop: '80px' }}>
                  <Button color="primary" onClick={() => {
                     setcontainerNumber(row.container_number);
                     setshow(true);
                  }}>
                    Show
                  </Button>
                  <p className="pb-1">
                    <MapPin />
                  </p>
         
                  <p className="pb-1">
                    <Link to={`/shipment/${row.id}/`}>
                      <Eye />
                    </Link>
                  </p>
                </div>
              )
            }
          },
        ]

    return <React.fragment>
        <MapModal containerNumber={containerNumber} show={showModal} />
        /* The table component */
        <Datatable columns={tableColumns} />
    </React.fragment>
}