How to transfer response error message from console to <p>-CodePudding

I have an API connected to my app which provides me with login() function. Every time when email or password is wrong I get a message in console.

I have <p> element where I want to show this message. I tried some things, but had no success.

Part of component where I want to get that message:

const [errorMessage, setErrorMessage] = useState('')

const handleSubmit = event => {
    event.preventDefault();
    try {
        login(email.value, password.value, () => navigate(fromPage, {replace: true}))
    } catch (e) {
        setErrorMessage(e)
    }
}

My login() function:

const login = async (email, password, cb) => {
    try {
        const response = await AuthService.login(email, password);
        console.log(response)
        localStorage.setItem('token', response.data.accessToken);
        setIsAuth(true);
        setUser(response.data.user);
        cb();
    } catch (e) {
        console.log(e.response?.data?.message);
    }
}

CodePudding user response：

When statements are wrapped in the try-catch block the error is not being propagated further, so to catch the error on a component level you need to either omit the try-catch block from the login function or re-throw the error:

const login = async (email, password, cb) => {
    try {
        const response = await AuthService.login(email, password);
        console.log(response)
        localStorage.setItem('token', response.data.accessToken);
        setIsAuth(true);
        setUser(response.data.user);
        cb();
    } catch (e) {
        console.log(e.response?.data?.message);
        throw (e.response?.data?.message || 'Unknown error');
    }
}

CodePudding user response：

One option would be to remove try-catch statement from your login function and await it. This will allow try-catch statement in the handleSubmit to handle api errors.

Another option is to return an error or error message in your login function:

const login = async (email, password, cb) => {
    try {
        // ...
    } catch (e) {
        return new Error(e.response?.data?.message)
    }
}

Then you could use the value to update your errorMessage state:

const [errorMessage, setErrorMessage] = useState('')

const handleSubmit = async event => {
    event.preventDefault();

    const response = await login(email.value, password.value, () => navigate(fromPage, {replace: true}))

    if (response instanceof Error)
        setErrorMessage(e)
}

CodePudding user response：

Solved: transfered my setter into login function:

const login = async (email, password, cb, setError) => {
    try {
        const response = await AuthService.login(email, password);
        console.log(response)
        localStorage.setItem('token', response.data.accessToken);
        setIsAuth(true);
        setUser(response.data.user);
        cb();
    } catch (e) {
        console.log(e.response?.data?.message);
        setError(e.response?.data?.message);
    }
}

Handler:

const handleSubmit = event => {
        event.preventDefault();
        login(email.value, password.value, () => navigate(fromPage, {replace: true}), setErrorMessage)

    }

CodePudding user response：

I guess you wanna do this React Native : how to change <Text> value dynamically

after catch be called you shoud set the state of your prop. Eg on link

      this.setState({errorMessage: e.response?.data?.message})

and then use errorMessage on that < p >

 {this.state.errorMessage}