want to show message to user. console log working fine im not sure why i cant show to user.

tried several methods to fix. error message from axios = 'Request failed with status code 404'

import { useParams, Link, Route, Routes } from 'react-router-dom';
import { useState, useEffect } from 'react';
import axios from 'axios';

function User() {
    const { id } = useParams();
    const [user, setUser] = useState(null);
    const [error, setError] = useState("");
    const [isLoading, setIsLoading] = useState(true);
    console.log("error", error);
    useEffect(() => {
        axios("https://jsonplaceholder.typicode.com/users/"   id)
            .then(res => setUser(res.data))
            .catch(error => {
                console.log("Error=>", error);
                console.log(error.message);
                
                setError(typeof (error.message));
                console.log("Check",error.message == 'Request failed with status code 404');
            })
            .finally(() => {
                setIsLoading(false);
            });


    }, [id]);
    return (
        <div>
            {error.message == 'Request failed with status code 404' ? <p>{error.message}</p> :
            isLoading ? <h2>Loading...</h2> :
                <div>
                    <h3>User Info</h3>
                    <p>Name: {user.name}</p>
                    <p>Email: {user.email}</p>
                    <p>Phone: {user.phone}</p>
                </div>
            }
            <Link to={`/users/${parseInt(id)   1}`}><button>Next User</button></Link>
        </div>
    )
}

export default User

CodePudding user response：

You have a couple bugs:

• use === when comparing instead of == to avoid type coercion
• when setting state setError(typeof (error.message));, remove typeof of it , setError(error.message);
• when testing the error.message simply test error and also display error

Here is a Sandbox

Note: I removed <Link> only for demo to stop throwing errors on Routes

import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import axios from "axios";

function User() {
  const { id } = useParams();
  const [user, setUser] = useState(null);
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    axios("https://jsonplaceholder.typicode.com/users/"   id)
      .then((res) => setUser(res.data))
      .catch((error) => setError(error.message))
      .finally(() => setIsLoading(false));
  }, [id]);
  return (
    <div>
      {error === "Request failed with status code 404" ? (
        <p>{error}</p>
      ) : isLoading ? (
        <h2>Loading...</h2>
      ) : (
        <div>
          <h3>User Info</h3>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
          <p>Phone: {user.phone}</p>
        </div>
      )}
    </div>
  );
}

export default User;

CodePudding user response：

Try to re-organize your logical rendering check the conditions

import { useParams, Link, Route, Routes } from 'react-router-dom';
import { useState, useEffect } from 'react';
import axios from 'axios';

function User() {
    const { id } = useParams();
    const [user, setUser] = useState(null);
    const [error, setError] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    console.log("error", error);
    useEffect(() => {
        axios("https://jsonplaceholder.typicode.com/users/"   id)
            .then(res => setUser(res.data))
            .catch(error => {
                console.log("Error=>", error);
                console.log(error.message);
// set error instead of type of the error 
                setError(error);
                console.log("Check",error.message == 'Request failed with status code 404');
            })
            .finally(() => {
                setIsLoading(false);
            });


    }, [id]);
    return (
        <div>{loading?
 <h2>Loading...</h2>
:
<div>

  {error?.message ===null?
 <p>'Request failed with status code 404'<p> : <p>{error.message}</p>}
                    <h3>User Info</h3>
                    <p>Name: {user.name}</p>
                    <p>Email: {user.email}</p>
                    <p>Phone: {user.phone}</p>
                </div>
</div>
}
            
           
            <Link to={`/users/${parseInt(id)   1}`}><button>Next User</button></Link>
        </div>
    )
}

export default User

CodePudding user response：

Seeing as you are using empty string in the state, just pass the error.message directly, and then your error will contain a string.

function User() {
    const { id } = useParams();
    const [user, setUser] = useState(null);
    const [error, setError] = useState("");
    const [isLoading, setIsLoading] = useState(true);
    console.log("error", error);
    useEffect(() => {
        axios("https://jsonplaceholder.typicode.com/users/"   id)
            .then(res => setUser(res.data))
            .catch(error => {
                console.log("Error=>", error);
                console.log(error.message);
                
                setError(error.message); // change this
                console.log("Check",error.message == 'Request failed with status code 404');
            })
            .finally(() => {
                setIsLoading(false);
            });


    }, [id]);
    return (
        <div>
            {/* and change this as well */}
            {error ? <p>{error.message}</p> : 
            isLoading ? <h2>Loading...</h2> :
                <div>
                    <h3>User Info</h3>
                    <p>Name: {user.name}</p>
                    <p>Email: {user.email}</p>
                    <p>Phone: {user.phone}</p>
                </div>
            }
            <Link to={`/users/${parseInt(id)   1}`}><button>Next User</button></Link>
        </div>
    )
}