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.

Create multiple instances of components that should get added next to each other: ReactJS

I need to create a set of card components that should get added up to bottom right of the screen. This card should be created on click of as button and clicking on some other button should add the card next to each other. I am having trouble creating this card component that should stick to the bottom right of the screen.
This is similar to linkedin website chat, that gets shown at the bottom right, and opening a chat will add that to the previously opened card
Can someone help as to how to get started or a simple example of how to add two cards to the bottom right of the screen on clcik of two different buttons?
Link to the sandbox : https://codesandbox.io/s/react-hook-form-with-material-ui-forked-c9o8ck
Code
// App.jsx
import React from "react";
import { Button } from "#material-ui/core";
import { Panel } from "./Panel";
export const App = () => {
return (
<>
<Button>Button1</Button>
<Button>Button2</Button>
<Panel />
</>
);
};
// Panel.jsx
import React from "react";
export const Panel = () => {
return <div> Panel Content</div>;
};

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>

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

React re-rendering modal component

I have 2 modal windows which I have defined as react components. As soon as the user on our sites click on a button, the first modal renders and indicates that some processing is happening. We are making some API calls while this modal is processing. Based on the results of the API call, I need to be able to replace this modal with another modal window that has some other content in it. Currently this is the code I have, but this does not render the second modal window.
import React, { PropTypes, Component } from 'react';
import * as statusList from './status';
class AppStatus extends Component {
static propTypes = {
component: PropTypes.string
}
render() {
const { component, ...statusProps } = this.props;
const Status = statusList[component];
return (
<div id="app-status" className="expanded row align-center align-middle">
<Status {...statusProps} />
</div>
);
}
}
export default AppStatus;
The behavior I am seeing is that the first modal shows first, when the second component has to render the modal completely disappears.
What am I am doing wrong here? How do I make this render?