My ReactJS Modal Window do not work.

Here is code:

import React from 'react';
import './Modal.css';
import Button from 'react-bootstrap/Button';

const Modal = ({ handleClose, show, children }) => {

const showHideClassName = show ? "modal display-block" : "modal display-none";

return (
<div className={showHideClassName}>
  <section className="card modal-main">
    {children}
    <div className="clear"></div>
    <Button onClick={handleClose}>
      Close
    </Button>
  </section>
</div>
);
};

export default Modal;

And here is code in my component:

function modalState(state) {
  return state;
};

<Modal show={modalState(setModal)} handleClose={modalState(false)}>
  {
    <div></div>
  }
</Modal>

And if I click Add user button then nothing happens:

  <Button variant="primary" size="sm" onClick={() => {
                      setModal = true;
                      modalState(setModal);
                    }}>Add User</Button>{' '}

What should I doing wrong?

CodePudding user response：

Try to use useState hook.

Your Modal component.

import { useState } from 'react';
import './Modal.css';
import Button from 'react-bootstrap/Button';

const Modal = ({ show, children }) => {
  const [modalState, setModalState] = useState(show);
  const showHideClassName = show ? "modal display-block" : "modal display-none";

  return (
    <div className={showHideClassName}>
      <section className="card modal-main">
        {children}
        <div className="clear"></div>
        <Button onClick={() => setModalState(false)}>
          Close
        </Button>
      </section>
    </div>
  );
};

export default Modal;

And your component where calls Modal component.

import { useState } from 'react';
import Modal from './path/Modal';

const CustomComponent = () => {
  const [modalState, setModalState] = useState(false);

  return (
    <>
      <Modal show={modalState}>
        {
          <div></div>
        }
      </Modal>

      <Button
        variant="primary" size="sm"
        onClick={() => setModalState(true)}
      >
        Add User
      </Button>
    </>
  );
}

export default CustomComponent;

But please note that this would be just a temporary solution based on your current codes. If you want a better and permanent solution, I'd like to recommend to implement the global state management thru your whole codebase using Redux or Recoil.

CodePudding user response：

In the onclick event useState set is not done to set the value of the Modal

   setModal({modal:true})

And

<Modal show={modal} handleClose={modalState(false)}>
  {
      <div></div>
  }
 </Modal>

CodePudding user response：

I think if you do this it will work.

const [isVisibleModal, setVisibleModal] = useState(false); // <- add

function closeModal() {
  setVisibleModal(!isVisibleModal);
};

<Modal show={isVisibleModal} handleClose={closeModal}>
  {
    <div></div>
  }
</Modal>

<Button 
  variant="primary" 
  size="sm" 
  onClick={() => setVisibleModal(true)}
>
 Add User
</Button>

Hope this helps you!

You should use setVisibleModal function same page like this code

import React, { useState } from 'react';

const YourComponent = () => {
  const [isVisibleModal, setVisibleModal] = useState(false); // <- add

  function closeModal() {
    setVisibleModal(!isVisibleModal);
  };

  return (
   <>
    <Modal show={isVisibleModal} handleClose={closeModal}>
     {
       <div></div>
     }
    </Modal>

    <Button 
      variant="primary" 
      size="sm" 
      onClick={() => setVisibleModal(true)}
    >
     Add User
    </Button>
   </>
  )
}

export default YourComponent;