My goal is to create a page for a specific user homepage with buttons to direct them to their accessible pages. I am in the testing phase right now and I want to use alerts to see if the button will react to being clicked on. However, as being new to React, I am having trouble have multiple buttons return an alert message in my browser. This is what I have so far.
// Here will be the mentor page with a decent layout and buttons to future pages.
import React from 'react';
import '../Mentor/Button.css'
import { useNavigate } from "react-router-dom";
function Mentor() {
function sayHello() {
alert('Hello');
}
function createQuiz(){
alert('You clicked me to create a quiz!');
}
return (
<div>
<button onClick={sayHello}>
Click me!
</button>
<button onCLick={createQuiz}>
Create Quiz
</button>
</div>
);
}
export default Mentor;
For not to get any errors, I added but it will only give me a message from sayHello and not from createQuiz. And the navigate import is something I am planning on using later when problem is fixed.
Assuming you copy pasted your code here, it looks like you simply misspelled the second onClick ! You wrote onCLick instead of onClick.
Related
I am trying to render a whole new component into a page when there's is event.
For example I have a button that sends request to DB, and I want that whenever this button is clicked a NEW toaster will open that will say "sent".
I saw this - Way to render a new component onClick in react js
And it just shows how to set toggle to show or hide element, but I want to add new one, so I will be able to add multiple of them.
export default function Demo() {
function handleClick() {
// show notification "clicked"
}
return (
<div>
<button onClick={() => handleClick()}>Click to update</button>
</div>
)
}
You can find a working sample in this codesandbox. I have used ant design to generate the notification. This comes out of the box without custom config. You can click the button as many times as you want and each time a new notification will be displayed.
The only things you need to do is:
Add antd to your dependencies in package.json
Add import "antd/dist/antd.css" to your index file
Start using notification right away in your component.
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 have a question regrading to react. I have a IconButton (Material UI) I want to click this button and it will redirect to the specific help page.
For example:
local:3000/education. When I clicked button it will redirect something like local:3000/education/support page.
local:3000/data. It redirect to something like data/support page.
...etc more pages
I am stuck, I am not sure how to implement the button onClick function to redirect to the right support page. I am thinking using react-router, I have did some research we can use 'params' and 'history' parameters from the props? Thank you
Please give me some good advice and right direction thank you.
import { useLocation, useHistory } from "react-router-dom";
export default function App() {
const history = useHistory();
const { pathname } = useLocation();
return (
<div className="App">
<button onClick={() => history.push(`${pathname}/support`)}>
support page
</button>
</div>
);
}
localhost:3000/education.
If you use history.push("/support"), It redirects to localhost:3000/support.
But If you use history.push("support"), It redirects to localhost:3000/education/support
https://reactrouter.com/web/api/Hooks
I'm using MemoryRouter and I don't want the browser to show the full link (in the bottom left corner) when hovering over Link.
<Link to="/somepath" />
Using a function in the to property didn't seem to work.
I know it wraps an <a> tag inside but it still uses href even when passed a function in to.
Any way to implement this?
If you don't want to show the link onHover, consider making the page change programatically with onClick instead of using a Link, as they appear as a normal a tag with it's own href attribute, exposing the URL.
Here's a snippet from the docs
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
In my demo here https://codesandbox.io/s/zq833pq6o3
you can open one dialog(Child-Dialog) in two different ways.
by an button who is in this dialog (Button: OPEN BY THIS)
by an button from the parent level (Button: OPEN BY REF)
But the same case is not working with my Login-Dialog in the App-Bar.
The difference between both cases is i'm using
import withMobileDialog from "#material-ui/core/withMobileDialog";
...
export default withMobileDialog()(LoginDialog);
// instead of normal way: export default LoginDialog;
in my Login-Dialog
Button: LOGIN => is working and open the Login-Dialog
Button: LOGIN REF => is not working and i get the error:
TypeError
_this.dialogRef.current.handleClickOpen is not a function
How can i fix the ref-Problem? By changing the export command?
the same problems are also by using of
export default withStyles(styles)(LoginForm);
// instead of: export default LoginForm;
thanks!