I am trying to change my URL after a modal is clicked.
I had added an extra onClick to the button which called the modal, this was to a function - in that function I added some console logging. I could see the logging, but the URL didn't change.
The (original) button code is:
<button className='buttonCheck' onClick={checkAnswer}>CHECK MY ANSWER</button> <CheckAnswerModal showModal={showCongratsModal} onClose={() => setShowCongratsModal(false)} videoMessage={showCongratsURL} content={showWindowContent} size='med'/>
And the modal
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
function CheckAnswerModal({showModal = false, onClose = () =>{}, videoMessage, content, size}) {
return (
<Modal
size={size}
show={showModal}
onHide={onClose}
backdrop="static"
keyboard={false}
>
<Modal.Body>
{videoMessage ? <video src={videoMessage} controls autoPlay> </video>: <div><center>{content}</center></div>}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onClose}>
Close
</Button>
</Modal.Footer>
</Modal>
)
}
export default CheckAnswerModal
Originally, I had added a new function to the calling page:
function GoHome() {
console.log("redirecting")
<Redirect to='/' />
}
and added this to the button onClick, I could see the logging, but no URL changing. I've done a bit of looking about and I am pretty sure this is not working as the modal is on screen. To get around this, in the GoHome() I even added a conditional (if the showModal is false, then do the logging)
I've seen some posts which talked about unmounting the component (now - this is something new to me, especially as I don't call any mount component explicitly.)
Am I missing something fundamental with redirect? Or can someone point me at what I am doing wrong (the redirect feels a little "hacky" just now, I need to redo a whole component I think, but this would work for now)
You have to install react-router-dom if you have not installed yet.
Then import it.
import {useNavigate} from react-router-dom
then call it inside a function like:
const navigate = useNavigate()
then in your onClose() function use navigate like:
navigate("/")
sorry for my English
Rather than trying to be smart, I simply declared history at the start and then in my onClose added history.push and it worked.
Related
I am using next.js, react18 and next-auth. I have a login component that checks the session and displays a login or logout link, depending on you are logged in or not
import Link from 'next/link';
const Login = () => {
const {data: session} = useSession();
if (session) {
return <Link href="#"><a onClick={() => signOut({callbackUrl: `${window.location.origin}`})}>Sign out</a></Link>
} else {
return <Link href="#"><a onClick={() => signIn()}>Log in</a></Link>
}
this used to work as expected, but then I installed react-bootstrap, I changed the links like this
import {Nav} from "react-bootstrap";
return <Nav.Link href="#"><a onClick={() => signOut({callbackUrl: `${window.location.origin}`})}>Sign out</a></Nav.Link>;
return <Nav.Link href="#"><a onClick={() => signIn()}>Log in</a></Nav.Link>;
and I started to get this error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
I know I could downgrade to react 17 or just use the 'next/link' component but I am looking for a workaround before to give up.
It's because you're referencing the window, which doesn't exist on the Server. The error was there in 17 as well, but React 18 is stricter, and will error out.
I don't know much about next.js, but react-bootstrap's Nav.Link component already renders an anker element, so you have link in a link. Try to use following:
<Nav.Link href="#" onClick={() => signOut({callbackUrl: `${window.location.origin}`})}>Sign out</a></Nav.Link>;
I see you rather doing some action then navigating. Maybe you can try to use Button with variant="link" or just use something else instead of anchor element.
Why do you use Nav.Link and react-bootstrap at all? Nav.Link only add styles, nothing else, no magic.
I'm using React and Nextjs, and I was having issues with my contact button. I want it so when someone clicks on my button, it should open up their mail with my email prefilled (pretty much the mailto functionality).
<Button onClick = {(href) => href - "mailto:email#yahoo.com"}> Email </Button>
I can't seem to figure out why it won't work, on click the button doesn't do anything.
As said in the comments, you could achieve the same thing with a tag. Even though it is already answered, I want to share my answer too, hope it helps others.
You can achieve the same result with a button too. In order to do that you will have to call useRouter hook from nextjs and then redirect user once they click on the button like so:
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.push('mailto:email#yahoo.com')}>
Click me
</button>
)
}
I'm using a Dialog component from Material-UI which, for the most part, is working correctly. However, if I click away from the Dialog, the Dialog will disappear (as expected) but sometimes, it remains in the DOM with its opacity set to 0, and I can't click anything else since the Dialog is in the way. This is a small sample of my code:
const [openDialog, setOpenDialog] = React.useState(false);
React.useEffect(() => {
// Get data for ReactTable
}, []);
return(
<div>
// Other components
<Button color="white" onClick={() => setOpenDialog(true)}>
Open Dialog
</Button>
// Other components
<Dialog open={openDialog} maxWidth="md" onClose={() => setOpenDialog(false)}>
// ReactTable and close button
</Dialog>
</div>
)
This bug doesn't always occur which makes it tricky to debug. I've only been using React for about a month, but I'm wondering if it's a state problem, or maybe some sort of race condition. Any suggestions?
Edit: This also occurs when a DropzoneDialog appears, to upload a file.
This also works:
<Dialog className={openDialog ? "" : classes.displayNone} open={openDialog} maxWidth="md" onClose={() => setOpenDialog(false)}>
// ReactTable and close button
</Dialog>
where in the styles file you have:
displayNone: {
display: "none"
}
In case anyone else has this same issue, I found the answer:
Elsewhere in the app, useEffect() was stuck in a loop and running extremely frequently which slowed the app down, causing this problem.
I'm a little bit confused with the SwipeableDrawer explanation on the Material-ui website. Basically I have a Component 'Sidebar' which opens a SwipeableDrawer if a user clicks on button on the appbar, or a user swipes to open up the sidebar.
In the appbar there's a button you can press which gets passed to the parent component.
// Topbar.js
<IconButton color="inherit" onClick={onSidebarOpen}>
<MenuIcon/>
</IconButton>
// Main.js
<Topbar onSidebarOpen={this.handleSidebarOpen}/>
The handelSidebarOpen method sets a state of whether the sidebar is open or closed. So now the problem is that I'm not entirely sure how to tell the Sidebar properly to open or close the drawer if a user swipes the drawer open.
I used this approach
<Sidebar
open={this.state.openSidebar}
onClose={this.handleSidebarClose}
/>
And then in the Sidebar class I do this
// Inside render method
const {open, onClose} = this.props;
return (
<SwipeableDrawer
open={open}
onOpen={event => this.showDrawer(event)}
onClose={onClose}
disableBackdropTransition={!iOS}
disableDiscovery={iOS}
>
{console.log(onClose)}
{this.fullList()}
</SwipeableDrawer>
);
Please feel free to ask me for clarification if you don't understand the problem. I've made a little demo to show the problem.
https://codesandbox.io/embed/dazzling-galileo-mc3oz?fontsize=14&hidenavigation=1&theme=dark
Try to swipe the sidebar open and watch what happens. Thanks in advance.
Just pass handleSidebarOpen method in Sidebar at your Main.js file.
<Sidebar
open={this.state.openSidebar}
onOpen={this.handleSidebarOpen}
onClose={this.handleSidebarClose}
/>
Get that function in your Sidebar.js and use it on onOpen attribute of SwipeableDrawer. Like below,
const { open, onOpen, onClose } = this.props;
return (
<SwipeableDrawer
open={open}
onOpen={onOpen}
onClose={onClose}
disableBackdropTransition={!iOS}
disableDiscovery={iOS}
>
{console.log(onClose)}
{this.fullList()}
</SwipeableDrawer>
);
I have also created sandbox for you;
https://codesandbox.io/s/react-gki1u?fontsize=14&hidenavigation=1&theme=dark
I have a modal page popping up when the user clicks a button, it's working perfectly :
render() {
return (
<div>
<section>
<button onClick={() => this.refs.simpleDialog.show()}>Open Modal</button>
</section>
<SkyLight hideOnOverlayClicked ref="simpleDialog" title="Test Modal">
Text that appears inside the modal page
<Button onClick={() => this.refs.simpleDialog.hide()} >Got It</Button>
</SkyLight>
</div>
)}
But My goal is to open the modal automatically when the user opens the page for the first time.
I don't want to open the modal page by clicking on a button
Question:
Can I use an IIFE (An immediately-invoked function expression) in order to open the modal as soon as the user open the page ?
My approach was to set a boolean to true. Then open the modal if the value is set to true
Library being used for the modal :
https://github.com/marcio/react-skylight
I think what you're looking for is the componentDidMount() lifecycle method:
componentDidMount() {
this.refs.simpleDialog.show();
}
From the React docs:
componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.
Feel free to checkout other component lifecycle methods.
To have a model open on component mount, just set isVisible to true
<SkyLight isVisible={true} ref="simpleDialog" title="Test Modal">