myAlert | myAlert is an alertview | Notification library

Here not working https://plnkr.co/edit/a7H1ilzkUA3918vc?open=lib%2Fscript.js&deferRun=1

But here in similar example - works, from which I am trying to do: https://plnkr.co/edit/XLSL581pjgwe3PI1?open=lib%2Fscript.js&deferRun=1

page1.js

I am migrating an app from Firebase to AWS Amplify. I want to create a React context which will provide route protection if the user is not logged in.

For example, my Auth.js file:

I have a button that acts as a link. The onclick is the myAlert() function shown below. The function creates a popup asking if you want to continue. It still goes to the next page even if you hit "cancel". What should I do?

I am trying to update database table according to two dropdownlists value,

and I want to prevent the user from leaving any of the two dropdownlists empty

but the problem is it only check the first dropdownlist if it was empty

for example if I fill the first dropdownlist and left the second one empty it will update the update database table and will not prevent the user from leaving the second one empty

I am using third party api in their sdk they have given option to fetch data on the base of where condition like this

I basically am building a web application using react and material UI. I have a registration form.

When this registration form successfully submits, it should display a success message at the top of the page.

Now, I have cordoned off the top of every page to show the MyAlert component. I have done this to make my site more consistent. Basically whenever there is a message to show to the user, it will render there.

Now, the issue is once the message is shown, if I navigate around my site, there is no way to turn it off.

Could someone please help explain what the best way to show a message once, then hide it would be? Basically once the user registers successfully, show a success message. Once the user navigates to a new page, hide the message at the top until a new message needs to be shown.

I imagine this is a very common design pattern, so I must be missing something in terms of React knowledge. Even best practice design patterns, or links to how it can be handled would be appreciated.

My toy app looks as follows:

App.jsx

I am trying to deploy Memory metric which comes under guest metrics for a VM using Terraform, I have already defined namespace for the metric that I am using but its throwing below error.

Error creating or updating metric alert "Memory Usage Alert" (resource group "MyTemp"): insights.MetricAlertsClient#CreateOrUpdate: Failure responding to request: StatusCode=400 -- Original Error: autorest/azure: Service returned an error. Status=400 Code="BadRequest" Message="The following metric name(s) were not found: Memory\% Committed bytes in use. Please note that for custom metrics, the relevant metric namespace must be specified.

I am trying to required the input of password before users can move to another screen but in my code when i hit continue the alert comes in the next screen instead.

Can anyone help ?

Code:

I'm using ref to show a custom alert but I've got a warning about deprecation so how can I use ref or any replacement of that?