// 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);
});
CodePudding user response:
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>
);
}
CodePudding user response:
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>;
}