import Modal from 'react-modal'
...
<div>
<button onClick={() => this.setState({showModal : true})/>
<Modal isOpen=this.state.showModal} className={...}
onRequestClose={ () =>this.setState({showModal : false})/>
</div
I notice that react-modal generate a completely new modal every time its triggered .
Is it possible to prevent the unmounting process of the modal when its closed ?
I wish the changes that has been done in the modal will save and perform next time the user open the modal
Just use the keepMounted tag:
<Modal keepMounted />
Related
I have a modal that when it is closed updates a state. The modal also has a div which will be replaced if a button is clicked. The button is replaced with a text area and 2 buttons (one of them a cancel.) If the cancel is clicked, the state updates and the text area hides. All good. However, if the user closes the modal, then the state is not updated and the div is shown next time.
I am unsure of how to set 2 states on close for the modal, I think this could sort this issue.
Code has been updated as per #jsNoob suggestion:
Hint component has
const [showModalProblemS_vid, setShowModalProblemS_vid] = useState(false);
<VideoModal showModal={showModalProblemS_vid} closeHandler={() => setShowModalProblemS_vid(false)} videoMessage={props.prob_s_vid} size='med'/>
So how to set a state which is not in the file is the issue
Modal Code below:
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import { useState } from 'react';
function VideoModal({showModal = false, closeHandler = () =>{}, videoMessage, content, size}) {
const [confused, setConfused] = useState(false)
return (
<Modal
size={size}
show={showModal}
onHide={closeHandler}
onClose={()=> {setConfused(false); closeHandler()}}
backdrop="static"
keyboard={false}
>
<Modal.Body>
<video src={videoMessage} controls autoPlay></video>
<div>
{confused ? (
<div>
What have you found confusing about this video?
<textarea className='confusedText' rows="2"></textarea>
<Button className="confusedBtnSave">
Save
</Button>
<Button className="confusedBtnCancel" onClick={()=>setConfused(false)}>
Cancel
</Button>
</div>
) : (
<div>
<Button className="confusedBtn" onClick={()=>setConfused(true)}>
Confused?
</Button>
</div>
)}
</div>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={closeHandler}>
Close
</Button>
</Modal.Footer>
</Modal>
)
}
export default VideoModal
Well to set multiple states you can do that inline
<Button onClick={() => {setState1(foo); setState2(bar)}}></Button
Or you could add them to a function and then call the function inline
function multipleStates(foo, bar){
setState1(foo)
setState2(bar)
}
<Button onClick={() => multipleState(foo, bar)}></Button>
I'm not sure if that is too broad of an answer for you, hopefully I haven't misinterpreted your question.
Got this working. I had to use the following:
onClick={() => {onClose(); setConfused(false)}}
note the semi-colon between the states
I am using react-bootstrap version 1.5.2 in react version 17.0.1. The problem is that the modal closes immediately after I click anywhere inside the modal body and that is not its natural behavior. I looked at some other questions that suggested using backdrop={ 'static' } but that too didn't work.
The other modal that I have in the page opens just fine and that too has the same components - the accordion inside. The only thing that is different here is I have get methods in useState and elements inside accordion is editable (used some functions there) but I dont think they are related to this modal behaviour as I haven't used anything to trigger the state. This the code how I have implemented the modal.
//the show.hide toggle is the usestate
const [showHelper, setShowHelper] = useState(false);
<div className="clarify-icon" onClick={() => setShowHelper(true)}>
<FaInfoCircle size="24" color="#BC2A20" className="pointer" />
</div>
<Modal
show={showHelper}
// backdrop="static"
onHide={() => setShowHelper(false)}
className="modal-left"
>
<Modal.Header closeButton>
<Modal.Title>Helper Text Templates</Modal.Title>
</Modal.Header>
<Modal.Body>
<Accordion defaultActiveKey="0">
...
</Modal>
It is pretty much the same thing. I am not sure what went wrong here.
I would like some assistance executing onHide event function which would setShow state to false when Close Button inside the Modal component is clicked.
Demo sandbox found here: Sandbox
I've temporarily bypassed submitHandler for debugging the modal only, line 71 will trigger the modal in a normal scenario
Do note Close is meant to window.close()
First, you have to add a new callback (e.g: buttonClose) for your modal's Close button.
<Button
variant="secondary"
{...props}
onClick={() => props.buttonClose()}
className="text-center"
>
Close
</Button>
And invoke it from your Step Component.
<SuccessModal
ref={props.superModalElement}
show={show}
onHide={handleClose}
buttonClose={handleClose}
/>
Working demo at CodeSandbox.
Modal not opening when i go back from another screen.
I'm navigate to my second screen and press "back".
Now, when i try to open modal its not work.
Main
....
const nav_to_lights =() =>{
navigation.navigate('Lights');
}
....
return(
....
<Modal visible={visible} onBackdropPress={() => Change_visible()} backdropStyle={styles.backdrop}>
<Card disabled={true}>
<Button
style={styles.iconcl}
appearance='ghost'
accessoryLeft={CloseIcon}
onPress={() => Change_visible()}
/>
<Button style={styles.Buttonset} onPress={chtg}>
{mtheme}
</Button>
</Card>
</Modal>
...
<Button onPress={nav_to_lights} style={styles.Button}>
Lights 💡💡💡
</Button>
....
)
And when i press back button from react navigate header modal not opening.But state of 'visible' changing. I think it's not work because page not render when i go back.
Usually you can solve these issues by force rendering the element on the event you want, one way to accomplish this is to put a key on the element and change it when you need a force render, like so:
<Modal key={myKey} visible={visible} onBackdropPress={() => Change_visible()} backdropStyle={styles.backdrop}>
onMount (or whatever you use)
myKey++
I am using the toast messages in reachjs together with the semantic-ui. The problem is that the toast message is showing behind the modal when dimmer is set to blurring. Otherwise it is showing on the top of the page as expected.
Do you have the same issues? How this can be corrected?
Thanks for your help!
<Modal
centered
size={'large'}
open={this.props.openVariationGeometry}
onClose={() => this.props.closeVariationGeometryModal()}
closeIcon
dimmer={'blurring'}
>
<Header icon="cube" content={'Change the Gemetry of the Selected Variation.'} />
<Modal.Content>
<VariationGeometryForm />
</Modal.Content>
</Modal>
Example
define a css rule for your toast with filter: none, or a general rule like this
.toast-container {
filter: none !important;
}
It is very old question but I ended here looking for a solution to the same problem so I wrote this down. At first, as this issue says, the only way I found to show the toasts with a modal present is by putting the Toast Container inside the modal. This method has the problem that you could see also the "main" toast blurred under the modal.
Later I found a final solution here. Both the toast container and the modal must be mounted on the same DOM node (I used #App).
First you have to put the toast container in the App component:
const App = () => (
<div id='App'>
<YourComponents />
<ToastContainer
className='dimmer toast-container' // 'dimmer' class is required to avoid blurring by modal
/>
</div>
)
After that you need the following css rule:
.blurring.dimmable > .toast-container {
// this prevents the toast from darkening by the modal
background-color: unset;
}
And finally the modal must be mounted in the same node:
<Modal
centered
size={'large'}
open={this.props.openVariationGeometry}
onClose={() => this.props.closeVariationGeometryModal()}
closeIcon
dimmer={'blurring'}
mountNode={document.getElementById('App')} // modal mounted on #App
>
<Header icon="cube" content={'Change the Gemetry of the Selected Variation.'} />
<Modal.Content>
<VariationGeometryForm />
</Modal.Content>
</Modal>