Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

365
Vistas
How I can use react-toastify promise while posting date using axios

// 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);
      });
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

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>
    );
  }
about 4 years ago · Juan Pablo Isaza Denunciar

0

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>;
}
about 4 years ago · Juan Pablo Isaza Denunciar

0

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",
      });
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda