New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
Use HTML demo modals in React demo
Hi, I need to re create modal for "Search Users" shown in html for react template however I don't know the efficient way to do it.
For reference:
https://preview.keenthemes.com/metronic8/demo1/apps/projects/users.html
Replies (1)
Hi,
You can add modal as shown below then just copy markup from the Users page and paste it to body of a Modal.
import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";
function Example() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
...
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
render(<Example />);When you will have all markup ready you can replace static HTML with data from your server. Make request to fetch data and then display this data in your markup.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
