// Want to show spinner while posting and then success/error message using react-toastify Is it possible?
axios.post("/orders.json", order)
.then((response) => {
console.log(response.status);
})
.catch((error) => {
console.log(error);
});
Yes it is possible. You can have a state called isLoading
and you can set it to true
when you submit a post
request and you can check for isLoading
before rendering your component like below.
if(isLoading) {
return (<Spinner />)
}
And you can use toast to show success/error
message after post
method is executed. Like below
toast.error('Sorry request failed')
or
toast.success('Request successfull')
But before use toast you have wrap your App
component in toast container
like below.
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App(){
const notify = () => toast("Wow so easy!");
return (
<div>
<button onClick={notify}>Notify!</button>
<ToastContainer />
</div>
);
}
This will solve your question.
import React, { useEffect, useState } from "react";
import axios from "axios";
import { toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
toast.configure({
position: toast.POSITION.BOTTOM_RIGHT
});
export default function App() {
const [state, setState] = useState({
loading: true,
dataArray: []
});
const myRequest = async () => {
try {
const request = await axios.get(`/generic_data/search_skills`);
const { error, msg, data } = request.data;
if (error) throw new Error(msg);
setState({ ...state, loading: false, dataArray: data });
toast.success("All good, we have the data");
} catch (e) {
toast.error("Upps, someting went wrong");
}
};
useEffect(()=>{
myRequest()
},[])
if (state.loading) {
return "Loading data from server.. this will take long time...";
}
return <div>The request has ended. We have the data</div>;
}
import { toast } from "react-toastify";
const promise=axios.post("/orders.json", order)
const res = await toast.promise(promise, {
pending: "Posting",
success: "Posted",
error: "error message",
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.