i want modal when click on button

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">&times;</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 :)