Is there any way to use Modal component inside app class in react?-CodePudding

I just faced a basic problem that is hard for me to solve. I'd like to create a modal to edit each row side of the table. But I don't know how to add a Modal Component inside the App Class.

How can I create a new component with custom Modal and then call inside the index.js?





class App extends Component {

  state = {
    lists: []
  }
  componentDidMount() {
    fetch('URL')
    .then(res => res.json())
    .then((data) => {
      this.setState({ lists: data })
      console.log(this.state.lists)
    })
    .catch(console.log)
  }

  render() {
    
    return (
      <div className="container">
          
              <table class="table-sm">
                <thead class="thead-dark">
                  <tr class="table-bordered">
                    <th>Order Number</th>
                    <th>Delivery Date</th>
                    <th>Customer</th>
                    <th>Tracking number</th>
                    <th>Status</th>
                    <th>Consignee</th> 
                    <th>Edit</th> 
                    <th>Delete</th> 
                  </tr>
                </thead>
                {this.state.lists.map(listInfo => {
            return (
                <tbody class="table-bordered">
                  <td >{listInfo.orderNo}</td>
                  <td >{listInfo.date}</td>
                  <td >{listInfo.customer}</td>
                  <td >{listInfo.trackingNo}</td>
                  <td >{listInfo.status}</td>
                  <td >{listInfo.consignee}</td>
                  <td ><Button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Show</Button></td>
                  <td ><Button class="btn btn-danger">Delete</Button></td>
                  </tbody>
                          )
                        })}
              </table>
              
     </div>
    );
    
  }
 
}


export default App;

CodePudding user response：

In your index.js or App.js add a new state isModalOpen, then -> in the end of your render method, add the CustomModal like this:

    render() {
        .
        .
        .
            <CusomModal open={isModalOpen} /* add other props here */ />
        </div>
        );
      }
    }

export default App;

Here is a custom modal component:

const CustomModal = ({ open, children, ...rest  }) => {
  const className = open ? "modal-container" : "hidden";

  return (
    <div className={className}>
        {children}
    </div>
  );
};

And here is the CSS classes:

.hidden {
   display: none;
}

.modal-container {
   position: absolute;
   width: /* add width here */;
   height: /* add height here */;
   top: 50%;
   height: 50%;
   transform: translate(-50%, -50%);
 }

You can customize it however you want. I think you didn't mean bootstrap-modal by mentioning custom, If you want that just check the bootstrap docs :D

CodePudding user response：

The problem has been solved by creating a new component like below and add to the add.js

    import React, { useState } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import {Button,Modal, ModalBody} from 'react-bootstrap';
import ShowDetails from './ShowDetails'

function InfoModal()
{
    const [show,popup]= useState(false);
    const modalOpen = () => popup(true);
    const modalClose = () => popup(false);
    return (
        <div>
            <Button variant="success" onClick={modalOpen}>Open</Button>
            <Modal show={show} onHide={modalClose}> 
                <ModalBody><ShowDetails /></ModalBody>
            </Modal>
        </div>
    )
}

export default InfoModal;