ReactJS Modal Window onClick - reactjs

Question

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?

Answer 1

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.

Answer 2

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>

Answer 3

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;