All the answers I have seen so far concern React-Bootstrap and use the Modal component.
I am using plain React with Bootstrap separately.
I have a form which displays a bunch of custom Checkbox components. When the form is submitted, I would like a modal to appear, displaying details pertaining to the checkboxes which were selected.
The problem is, I cannot even get the modal to appear when the form is submitted.
In the App component which contains the form, I have a state
const [showModal, setShowModal] = useState(false)
Initially, showModal is false. When the form is submitted, I call the following function
function handleSubmit(event){
event.preventDefault()
/*...code to retrieve checkboxes which have been selected...*/
setShowModal(true)
}
In the return statement, after the form, I conditionally render a SelectionsModal Component:
<div>
<div className="container mt-5">
<form onSubmit={handleSubmit}>
{/* Render checkbox components here */}
<div>
<button className="btn btn-warning" type="submit">Submit</button>
</div>
</form>
</div>
{showModal && <SelectionsModal />}
</div>
The code for the SelectionsModal component is just the code for a simple Bootstrap modal (from their website), because at this point I just want a modal to appear (not concerned with displaying which checkboxes were selected for now).
When I submit the form, React Dev Tools shows me that the SelectionsModal component is rendered, but no modal appears. If it was just some simple div with text in the SelectionsModal, then it would conditionally appear as expected.
I am quite at a loss here, maybe there is something about Bootstrap modals that I am missing. I saw on the modal documentation that I can use the show method to manually make the modal appear, but this does not seem to work with React.
Any help is much appreciated, thanks!