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++
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 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.
I learn some React-router-dom and it's kind of working but since I have three Components one after the other like a long page. Then When I click about button like this in the top menu;
<Button variant="primary" onClick={() => history.push('/articles')}>
Articles
</Button>
<Button variant="primary" onClick={() => history.push('/stories')}>
Stories
</Button>
<Button variant="primary" onClick={() => history.push('/about')}>
About
</Button>
The /about page is rendered but not scrolled to because it's page number 3. Is there some way to auto scroll to the page?
My menu is not fixed but whenever user scroll up the menu appear and when user scroll down the menu is gone to not block content.
It looks like this three Components forming a long page
Is there maybe something built into react router or useHistory or do I have to figure out some way to make the Components know they are being summoned from main Menu? and then themselves calculate how to scroll to become visible.
I know little React Redux and was thinking I could dispatch and action from the Menu button and mapStateToProp listen for the action in the Component, that then will scroll visible. Feels like a bad hack don't know.
not sure if this works or if this consistent/best solution, but as far as here is no other answers you could try to use this
const onAboutPageClick = () =>{
const aboutPageNode = document.getElementById('aboutPage')
aboutPageNode.scrollIntoView({behavior: "smooth"});
history.push('/about')
}
<Button variant="primary" onClick={() => history.push('/articles')}>
Articles
</Button>
<Button variant="primary" onClick={() => history.push('/stories')}>
Stories
</Button>
<Button variant="primary" onClick={onAboutPageClick}>
About
</Button>
..... some other html code
<div id="aboutPage"> Here is about page </div>
in the the answer above said by Dmitriy Sakhno it gives an error I think because it cann't find it because the page haven't render yet
so I used setTimeout and it worked.
const onAboutPageClick = () => {
history.push('/about')
setTimeout(() => {
const aboutPageNode = document.getElementById('aboutPage');
aboutPageNode.scrollIntoView({behavior: "smooth"});
}, 0);
}
I'm using an accordion to show history, and have a Clear History button within the accordion. I want to close the accordion when the Clear History button is clicked. It does clear the history, and changes the direction of the chevron, but doesn't actually close the accordion.
My Accordion:
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle as={Card.Header} eventKey="1" onClick={() => setOpen(!open)}>
Roll History { open ? <FaChevronUp /> : <FaChevronDown/> }
</Accordion.Toggle>
<Accordion.Collapse eventKey="1">
<Card.Body>
{historyText.length > 0 &&
<Button onClick={clearHistory} variant="primary" size="sm">
Clear History
</Button>
}
{historyText}
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
My clear history code:
const clearHistory = () => {
setHistoryText([]);
setOpen(!open);
}
**Update
Based on a comment that has been deleted, I made the following changes:
const [key, setKey] = useState("1");
Then in my clear code:
setKey("0");
Then I set the eventKey:
<Accordion.Collapse eventKey={key}>
At this point it works for one round, but I don't have anything to set it back to a 1.
The reason the chevron changes is because of this line:
{ open ? <FaChevronUp /> : <FaChevronDown/> }
But I don't see anywhere else you are checking for open to decide whether to close or open the accordion.
I don't know your whole codebase well enough to say where it should go. But it seems that somewhere else you should be checking the value of open (maybe where you render <Card.Body>?
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 />