react jsx web page dev pop up alert

Question

I am not getting how to use the alerts in react, I want to create an alert when someone clicks create crq button on my app and it would return the coq after fetching it.

the problem is this is a work assignment so I can not share my screen with the working code.. this is all of it and it is working, except no alert,.. would appreciate some guidance. 

there are 2 items I include 

the app.js

and the create crq <--- ned an alert after fetching with the crq#

the workflow is they click get apm button it gets apm information

the user then selects which items to use - ( that is formatted in the data grid)

then they click create crq which should've a popup or alert or something with the crq after it is fetched.. 

App.js

App.js

import React from 'react';

import { useRef, useState } from 'react';

import './App.css';

import DataTable from './component/DataTable';

import GetAPMinput from './component/GetAPMInput';

import CreateCRQButton from './component/CreateCRQButton';

import Ateam from './component/Ateam.jpg'; // with import

import Ateam2 from './component/ateam2.png'; // with import

function GetAPMInput1() {

  const inputRef = useRef();

  const [updated, setUpdated] = useState("ad00007073");

  const [isShown, setIsShown] = useState(false);

  const handleClick = () => {

   // 👇 "inputRef.current.value" is input value

   setUpdated(inputRef.current.value);

   setIsShown(current => !current);

 };

  return (

   

    

    

     ref={inputRef}

     type="text"

     id="message"

     name="message"

    />

     pity da fool with this APM idbutton>

     

enter APM id then click: h2>      {isShown && (

     

      

h2>     div>

   )}

   div>

 );

}

function App() {

  return (

   

    

    

   div>

 );

 }

export default App;

Createcrq.js

import React,{useState} from 'react'

import DataTable from './DataTable';

import {Selection} from './DataTable';

const CreateCRQButton = () => {

 

  const headers = {

   "Content-Type": "application/json"

};

const [mydata, setMydata] = useState("");

  const submitData=(e)=>{

  e.preventDefault(); 

   console.log('Selection');

   console.log(JSON.stringify({Selection}))

fetch(https://API.api.com(fake),{

   method: 'POST',

   headers: headers,

   cache: 'no-cache',

   redirect: 'follow',

    body:  JSON.stringify({Selection})

  })

   .then((response) => response.json())

   .then((mydata) => console.log(mydata))

   .then(mydata => { return mydata});

   console.log("data------")

 

};

   return (

   <>

   

    

Select Certificate / host Devices above then click {mydata}h2>    

     

div>     Create CRQ {mydata}button>

    mydata {mydata}

    form>

    div>

   

 )

}

export default CreateCRQButton;

Answer 1

Hi there,

If you want to have an alert after some API response in your code you can simply call the global `alert` and pass in the information you want to alert to the user.

Here's an example if you wanted to call an alert from a button click:

export default function App() {

return (

<div>

<button onClick={() => alert('I have been clicked!')}>Click me</button>

</div>

);

}

And if you wanted to alert after a a fetch:

fetch(https://API.api.com(fake),{

method: 'POST',

headers: headers,

cache: 'no-cache',

redirect: 'follow',

body: JSON.stringify({Selection})

})

.then((response) => response.json())

.then((mydata) => {

alert('Some thing!');

});

Hope this helps. If you need some further explanation for your specific use case, I recommend using a CodeSandbox or something similar to share your exact code sample.