We Keep Coding

Multiple Buttons React.js

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.

How to use a element with href property in combination with react-router?

I want to use the navigation.push(url) functionality when clicking on an anchor tag element so that the app doesn't refresh by navigating to another page, and I can keep the application state.
The reason why I want to use this on an anchor tag element instead of a button is:
to keep the native functionality to right click the element and copy the url
to keep the url becoming visible when hovering over the element
When trying to use the combination as seen in the code below it still navigates towards a new page causing the webapp to refresh:
import React from 'react';
import { useHistory } from 'react-router-dom';
const TestComp = () => {
const navigation = useHistory();
return (
<a
onClick={() => {
navigation.push(`/test`);
}}
href={`/test`}>
this is a link
</a>
);
};
export default TestComp;

Use the Link component from react-router-dom. It renders an anchor tag to the DOM and does all the linking/navigation for you that you are trying to do manually, and it doesn't reload the page.
import React from 'react';
import { Link } from 'react-router-dom';
const TestComp = () => {
return (
<Link to="/test">
this is a link
</Link>
);
};
export default TestComp;

By using event.preventDefault() it prevents the browser to execute the norma function of a event (click)... On anchor tag, it prevents the browser from navigating to another page, so that you can do it manually
<a
onClick={(e) => {
e.preventDefault()
navigation.push(`/test`);
}}
href={`/test`}>
this is a link
</a>

How to use div like link to redirect to another page?

I need to make div which will act simulate to Link element, so when you click on it you navigate to another page.
Something like this
<Link to="/employees">
...
</Link>
But it has to be div.
I could use onClick but when I use it, I should use whole path https://pro.websire.com/employees. I don't want to use it because we have different versions of website.
So path should be exactly like in Link element
<div onClick={to('/employees')}>
...
</div>
Does anyone know is it possible to do ?

If you are using react router, you can programmatically navigate using the useNavigate hook. Inside your component, you need to do the following.
const LinkComponent = () =>{
const navigate = useNavigate()
return(<div onClick={() => navigate("/home")}>Link </div>)
}

React button mailto on click

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>
)
}

react-router-dom Link - hide URL on hover

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>
);
}