TypeError: Cannot read property 'error' of undefined

Question

I already define error. however, it is giving error that "TypeError: Cannot read property 'error' of undefined"

I am stock here. I will appreciate idea to go beyond this.

Thank you for your help.

Error screenshot

Signup Component code

import React , {useState} from 'react';
import { signup } from '../../../actions/auth';


const SignupComponent = () => {
    const [values, setValues] = useState({
        firstname: '',
        lastname: '',
        email: '',
        phonenumber: '',
        password: '',
        confirmpassword: '',
        howdidyouknowaboutus: '',
        error: '',
        loading: false,
        message: '',
        showForm: true

    });

    const {firstname, lastname, email, phonenumber, password, confirmpassword, howdidyouknowaboutus, error, loading, message, showForm} = values;

    const handleSubmit = e => {
        e.preventDefault();
        /* console.table({firstname, lastname, email, phonenumber, password, confirmpassword,howdidyouknowaboutus, 
            error, loading, message, showForm}); */
        setValues({...values, loading: true, error: false})
        const user = {firstname, lastname, email, phonenumber, password, confirmpassword, howdidyouknowaboutus}

        signup(user).then(data => {
            if (data.error) { ----------------------------------------------- The line with the error
                setValues({...values, error: data.error, loading: false});
            }else{
                setValues({
                    ...values, 
                    firstname: '', 
                    lastname: '', 
                    email: '', 
                    phonenumber: '', 
                    password: '', 
                    confirmpassword: '', 
                    howdidyouknowaboutus: '', 
                    error: '', 
                    loading: false, 
                    message: data.message,
                    showForm: false
                });
            }
        });
    };

   
};

export default SignupComponent;

Thank you

Answer 1

UPD

signup(user).then(data => {
     if (data) { // check here if data not undefined
        if (data.error) {
            setValues({...values, error: data.error, loading: false});
        }else{
            setValues({
                ...values, 
                firstname: '', 
                lastname: '', 
                email: '', 
                phonenumber: '', 
                password: '', 
                confirmpassword: '', 
                howdidyouknowaboutus: '', 
                error: '', 
                loading: false, 
                message: data.message,
                showForm: false
            });
        }
    } else {
         // probably here you would need to do something if dada is undefined
    }
});

Previous reply

Change it to

if (data && data.error) 

to be sure that data is defined

Answer 2

Console.log(data) to check the response first, and maybe screen shoot and post the service for signup as any data receive will be coming from the response on the service itself. make sure you have a catch for the error in the signup service as well.

Update

in your API you catch the error with something like :

return res.status(400).json({
      errorMessage: "Username already taken",
    });
  }

then in your front end :

function internalServerError(err) {
  if (err.response && err.response.data && err.response.data.errorMessage) {
    return {
      status: false,
      errorMessage: err.response.data.errorMessage,
    };
  }
  return {
    status: false,
    errorMessage: "Internal server error. Please check your server",
  };
} 

and in your API call you can catch the error with something like this :

export function signup(credentials) {
  return // here your  call to the server
    .then(successStatus)
    .catch(internalServerError);
}

Answer 3

Thank you. This work. But, the post request to backend is pending, checking the network capture. No error at the console. However, the pending is pointing to this code

import fetch from 'isomorphic-fetch';
import {API} from '../config';

export const signup = (user) => {
    return fetch(`${API}/signup`, { ----- pending status pointing to this line 
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(user)
    })

    .then(response => {
        return response.json()
    })
    .catch(err => console.log(err));
};