How to open a modal within another modal in React?-CodePudding

I have 2 components, each one has a modal. I want one of the modals to be opened from a button in the other, so far clicking the button only closes the current active modal but doesn't open a new one.

//Modal 1

<div className="modal fade" id="myModal">
            <div className="modal-dialog">
                <div className="modal-content">
                    <div className="modal-header d-flex justify-content-center">
                        <h4 className="modal-title">Supplier Name</h4>
                    </div>
                
                    <div className="modal-body">
                        <h3 className="text-center mt-2">Search Bar</h3>
                        <form>
                            <input 
                            type="text" 
                            className="form-control"      
                            />
                        </form>
                        <table className="table mt-5">
                            <thead>
                                <tr>
                                    <th>Supplier Name</th>
                                    <th>Choose Supplier</th>
                                </tr>
                            </thead>
                            <tbody>
                                {suppliers.map(supplier => (
                                    <tr key={supplier.supplier_id}>
                                        <td>{supplier.supplier_name}</td>
                                        <td><button className="btn btn-info" onClick={()=> chooseSupplier(supplier.supplier_id)} data-dismiss="modal">Choose Supplier</button></td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                
                
                    <div className="modal-footer">
                        <AddNewSupplier/>
                        <button type="button" className="btn btn-danger">Close</button>
                    </div>
                </div>
            </div>
        </div>

In particular here is the [AddNewSupplier] button that should link to a second modal:

<div className="modal-footer">
    <AddNewSupplier/>
    <button type="button" className="btn btn-danger">Close</button>
</div>

From this modal I want to be able to open up a second one

//Modal 2

<a data-dismiss="modal" data-toggle="modal" href="#myModal" className="btn btn-primary">Launch modal</a>
        
  <div className="modal fade" id="myModal" role="dialog">
    <div className="modal-dialog">
    
      
      <div className="modal-content">
        <div className="modal-header">
          <button type="button" className="close" data-dismiss="modal">&times;</button>
          <h4 className="modal-title">Modal Header</h4>
        </div>
        <div className="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div className="modal-footer">
          <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

I'm using React, Express, Bootstrap 4. Any help is appreciated!

CodePudding user response：

Take a look at how you should be using Boostrap modals with React: https://www.pluralsight.com/guides/working-with-bootstraps-modals-react

Basically, you install the npm packages: npm i react-bootstrap bootstrap then, you import the Modal from the Package, and you use it as a component to wrap your content:

 <Modal>
  //your content here
 </Modal>

Now the modals should be managed by the state, so you give it a state:

const [isModalOneOpen, setIsModalOneOpen] = useState(false) //modal is closed

Now you can use that state to pass it as a prop to the modal:

<Modal show={isModalOneOpen}>
  //your content here and lets add a button to open the second modal from here:
    <button onClick={() => setModalTwoOpen(true)}>Modal 1 will open</button>
</Modal>
<button onClick={() => setIsModalOneOpen(true)}>Open Modal 1</button> //this button will open the first modal

Now, let's add the second Modal, same as the first one but with a different state:

const [isModalTwoOpen, setIsModalTwoOpen] = useState(false);

<Modal show={isModalTwoOpen}>
  //your content here
</Modal>

Now, to close the modals from anywhere, you can simply set the state to false of the modal you want to close, for example:

<Modal show={isModalTwoOpen}>
  //your content here
  <button onClick={() setIsModalTwoOpen(false)}>Close this modal</button>  
</Modal>

Note: if Modal 1 is in one component and Modal 2 is in another one, then you need the Manage the state of both modals from the parent component. Also, as noted in the comments, opening modals over modals is not a nice user experience, just to keep it as a side note in your designs.