title: How to define time out to API petition using axios reactjs
body: <p>I am trying to set timeout to API petition in case i get some error using <code>get</code>, then Loader keeps running for at least 3 seconds to finally show a text sayd &quot;no data or API connection/petition failed&quot;.</p>
  <p>I have <code>Dashboard.jsx</code> that works perfectly if theres not error for url, server API fallen, etc.
  To simulate an error i just changed <code>url</code> and I turned off the server but i get <code>TypeError: paciente.map is not a function</code> and <code>Loader</code> dies instantly.</p>
  <p>I tried setting <code>timeout: 3000</code> in axios but get anything</p>
  <pre><code>export const Dashboard = (props) =&gt; {
    const [paciente, setPaciente] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [errormsg, setErrormsg] = useState(&quot;&quot;);
  
    const navigate = useNavigate();
    let url = `${Apiurl}pacientes?page=1`;
    useEffect(() =&gt; {
      setLoading(true);
      axios
        .get(url)
        .then((response) =&gt; {
          if (!response.err) {
            setPaciente(response.data);
            setError(null);
          } else {
            setPaciente([]);
            setError(response);
          }
          setLoading(false);
        })
        .catch((error) =&gt; {
          setError(error);
          setErrormsg(&quot;No data&quot;);
          setLoading(false);
        });
    }, []);
    const handleClick = (id) =&gt; {
      navigate(`/edit/${id}`);
    };
    return (
      &lt;&gt;
        &lt;Header /&gt;
        {loading &amp;&amp; (
          &lt;div className=&quot;loader-container&quot;&gt;
            &lt;Loader /&gt;
          &lt;/div&gt;
        )}
        &lt;div className=&quot;container&quot;&gt;
          &lt;table className=&quot;table table-dark table-hover&quot;&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th scope=&quot;col&quot;&gt;ID&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;DNI&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;NOMBRE&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;TELEFONO&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;CORREO&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {!error ? (
                paciente.map((data, i) =&gt; {
                  return (
                    &lt;tr key={i} onClick={() =&gt; handleClick(data.PacienteId)}&gt;
                      &lt;td&gt;{data.PacienteId}&lt;/td&gt;
                      &lt;td&gt;{data.DNI}&lt;/td&gt;
                      &lt;td&gt;{data.Nombre}&lt;/td&gt;
                      &lt;td&gt;{data.Telefono}&lt;/td&gt;
                      &lt;td&gt;{data.Correo}&lt;/td&gt;
                    &lt;/tr&gt;
                  );
                })
              ) : (
                &lt;tr&gt;
                  &lt;td colSpan=&quot;5&quot;&gt;{errormsg}&lt;/td&gt;
                &lt;/tr&gt;
              )}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  </code></pre>