i want modal when click on button - reactjs

Question

hi guys i am new in react js Am trying to build a small modal application , in this application i want to popup when i click on trigeer buttton , i did but not working my method if anyone know please tell me how can i solve this problem
modal.js
This is my form where i want to popup when i click on trigger button
import React, { useState } from 'react';
import './Modal.css';
import Popup from 'reactjs-popup';
import Pop from './Pop';
const Modal = () => {
const [mail, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleChange = (e) => {
e.preventDefault();
if (password === "") {
return alert("please Enter Email and Password")
}
else {
return <Popup trigger={
<Pop />
}>
</Popup>
}
}
return (
<div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email"
value={mail}
onChange={(e) => setEmail(e.target.value)}
required />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required />
</div>
<button type="submit" class="btn btn-primary" onClick={handleChange}>Trigger</button>
</form>
</div>
)
}
export default Modal;
pop.js
import React from 'react'
const Popup = () => {
return (
<div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Submit
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer" style={{ display: 'flex', justifyContent: 'space-around' }}>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
)
}
export default Popup;

Answer 1

You can use react bootstrap modal component here.
import React, {useState, setShow } from 'react'
import {Modal} from 'react-bootstrap';
const myModal = () => {
//handeling the modal open & close
const [show, setShow] = useState(false);
const handleShow = () => setShow(true);
const handleClose = () => setShow(false);
return (
<>
//this the button that triggers the modal
<button onClick={handleShow}> Show Modal </button>
<Modal className="my-modal" show={show} onHide={handleClose}>
<Modal.Header closeButton className="mymodal-head">
<Modal.Title className="mymodal-title"><h4>The Modal</h4></Modal.Title>
</Modal.Header>
<Modal.Body className="mymodal-body">
//add your input fields and labels here
<input/>
</Modal.Body>
<Modal.Footer className="mymodal-footer">
//add your submit button here
<button> submit </button>
</Modal.Footer>
</Modal>
</>
)
}
Hope this helps! Feel free to ask me if you have any issues with the modal :)