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.
Related
I'm new to React and I'm creating a Wiki of my repositories on GitHub.
So, I want to remove that item from my list when I click "Remover" and open the repository on a new page when I click "Ver repositório".
But there's is my problem!
When I click the red anchor, it does remove, like I expected. Also, when I click the blue Anchor, it open the repository page and ALSO removes the list. What should I do?
This is the function that I created to remove the repository:
const handleRemoveRepo = (id) => {
const remove = repos.filter((repo) => repo.id !== repo.id);
setRepos(remove);
if ((repo) => repo.id === repo.id) {
return null;
}
And this is the container to map everything:
<Container>
{repos.map(repo => <ItemRepo handleRemoveRepo={handleRemoveRepo} repo={repo} />)}
</Container>
My container comes from this index.js:
<ItemContainer onClick={handleRemove}>
<h3>{repo.name}</h3>
<p>{repo.full_name}</p>
Ver repositório <br />
Remover
<hr />
</ItemContainer>
Thanks in advance.
React App page for example
I tried switching the conditional on my function, exporting a new function on ItemRepo, but both didn't work.
The "remove" click handler is assigned to the container, so it will be invoked if you click anywhere in the container:
<ItemContainer onClick={handleRemove}>
If it should only be invoked when clicking a specific link, assign the click hander to that specific link instead:
<a href="#" className="remove" onClick={handleRemove}>Remover</a>
As an aside... This shouldn't be a link. It's not navigating the user anywhere, but is just performing an action in code. A <button> is a more semantically appropriate element for that. Which can be styled to not have the defaul button background, or styled however you want.
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.
First of all, a shout out to Yoav the developer of React Uploady. It's a very helpful library with all kinds of great fancy features (chunked uploads, upload progress hooks, etc).
I have a question about using the asUploadButton hook. Here's my use case: within my app, a user can choose from several places to upload a batch to. This is done by selecting a global dropdown that specifies the upload destination. Since user error is a real thing, I need to show them a confirmation screen. This is easy to do the first time they hit the "upload" screen: a state variable keeps track of whether they have confirmed they're in the right place, conditionally rendering either the confirmation component (if they haven't confirmed), or the Uploady component (custom UploadButton) if they have confirmed.
But the requirement is that we show the confirmation every time. Once a user has uploaded a batch, they should still be shown the confirmation if they click on that custom UploadButton again. I tried passing an onClick into the asUploadButton component, but that callback is actually called after showFileUpload - and I want to show an interstitial modal once the button is clicked but before showFileUpload is called. Is there any hook to call a method before showFileUpload? Or am I approaching this completely wrong? Advice of any kind is very appreciated.
as answered here on the react-uploady discussions page:
In your case, I think a custom button will make more sense. In the end, asUploadButton is a very simple component that mainly does one thing and that is, call showFileUpload available from the UploadyContext.
You could create your button component that implements the logic (show confirmation) and when user approves calls the showFileUpload.
You get access to the method using:
import { useUploady} from "#rpldy/uploady"
//...in your component:
const { showFileUpload } = useUploady();
const onClick = () => {
//custom logic
showFileUpload();
};
I have two components, component A and component B
In Component A , i have two buttons
Like in picture, I have Start and Stop buttons. If I click on Start button Stop button will be enabled and Start will be disabled.
Now my problem is if I click on Start button and If I navigate to some other page, and if I comeback to page, Start button is getting enabled and Stop button is getting disabled.
Expectation is if I click on Start button, it should still be in disabled mode and Stop button should be on enabled mode when navigated to another component and come back to this component
<button #click="start" class="start-button" icon-left="play" :disabled="!allowStart">Start</button>
<button #click="stop" class="stop-button" icon-left="stop" :disabled="allowStart">Stop</button>
data() {
return {
allowStart: true,
};
}
start() {
this.allowStart = false;
}
stop() {
this.allowStart = true;
}
Can anyone help me on this. appreciated the help and response in advance.
It sounds like the component is being destroyed and re-created when you navigate away and back. In this case, there is no way for the component to remember what the value of allowStart was.
Either you have to re-design the component architecture so that this particular component persists when you are navigating, or you need to use some kind of global state management system. The best option would probably be by using vuex. If you use vuex to store the state of allowStart, then when the component is re-created, you can read the value of the state.
If for some reason you don't want to use vuex, you could also use the browser's localStorage
I have created a modal component called ImportCardModalComponent.
This component must be opened if the login is failed. like follows:
this.authSerivce.logInRegular(this.model).then(result => {
console.log(result);
}, error => {
var importModal = this.modalService.open(ImportCardModalComponent);
});
The issue is that the dialog doesn't appear unless I click the button on screen twice and fire the service two times.
The first time I click the button, DOM elements are added successfully but without css class in <ngb-modal-backdrop> and <ngb-modal-window>. As shown below.
The second time I click on the button, the classes are showing correctly. As show below:
The modal MUST have class ="modal-backdrop fade show" in backdrop element. As well as class="modal fade show d-block" in window element.
I tried to use the modalService with NgbModalOptions backdropClass and windowClass without any success to work from first time.
If I move the open modal service outside the reject callback, it works fine.
Any Help is much appreciated.
One way is to manually trigger change detection after modal service call.
Get the reference of ApplicationRef
constructor(private appRef: ApplicationRef,...){}
and then invoke change detection:
this.authSerivce.logInRegular(this.model).then(result => {
console.log(result);
}, error => {
var importModal = this.modalService.open(ImportCardModalComponent);
this.appRef.tick();
});