Function passed down as a prop not recognized as a function

Question

I am passing down a lot profile information as part of my access_token's payload

{
  "token_type": "access",
  "exp": ***,
  "iat": ***,
  "jti": "*****",
  "user_id": 1,
  "username": "emmanuelS21",
  "first_name": "",
  "last_name": "",
  "country": "",
  "city": "",
  "bio": "",
  "photo": "\"profile/2022/03/27/emmanuelpic.png\""
}

I then use this information to populate a user's profile page. I am trying to build a function enabling users to update profile information upon submitting a form with new information. However I am getting the error message:

Uncaught TypeError: updateProfile is not a function

With updateProfile referring to the function that houses the logic to update profile information. Here are relevant snippets of my code:

Profile.js:

import { updateProfile } from "../login_components/LoginActions.js";

    const Profile = () => {
        let { user,logOutUser,updateProfile } = useContext(AuthContext)
        const[profileUser, setProfileUser] = useState({user})
        //handle form submission
        const handleSubmit = e => {
            console.log('handle submit',profileUser)
            const updatedProfile = {
                username: profileUser.username,
                email: profileUser.email,
                first_name: profileUser.first_name,
                last_name: profileUser.last_name,
                city: profileUser.city,
                country: profileUser.country
            }
            e.preventDefault();
            updateProfile(updatedProfile);
    }

My LoginTypes.js:

export const SET_TOKEN = "SET_TOKEN";
export const SET_CURRENT_USER = "SET_CURRENT_USER";
export const UNSET_CURRENT_USER = "UNSET_CURRENT_USER";
export const UPDATE_PROFILE = "UPDATE_PROFILE";

LoginActions.js:

export const updateProfile = (userData) => dispatch => {
    axios
        .post("http://127.0.0.1:8000/update_profile/", userData)
        .then(response => {
            console.log('response is:', response.data)
            dispatch({
                type: UPDATE_PROFILE,
                payload: userData
  });
        })

}

UPDATE made changes based on the top answer, added my updateProfile function to my AuthContext file

   const updateProfile = (userData) => dispatch => {
        console.log('Update Profile is being triggered')
        axios
            .put('http://127.0.0.1:8000/update_profile/', userData)
            .then(res => {
                console.log(res)
            })
    }
    let logOutUser = () => {
        setAuthTokens(null)
        setUser(null)
        localStorage.removeItem('authTokens')
        history.push('/')
    }

and avoided overwriting this function in Profile.js:

let { user,logOutUser,updateProfile } = useContext(AuthContext)
        const[profileUser, setProfileUser] = useState({user})
        const handleSubmit = e => {
            console.log('handle submit',profileUser)
            const updatedProfileInfo = {
                username: profileUser.username,
                email: profileUser.email,
                first_name: profileUser.first_name,
                last_name: profileUser.last_name,
                city: profileUser.city,
                country: profileUser.country
            }
            console.log(updatedProfileInfo)
            e.preventDefault();
            updateProfile(updatedProfileInfo);

but still getting the same error

Answer 1

You're overwriting updateProfiles with the destructuring of the useContext call which makes it undefined (because it probably doesn't exist on the returned object), resulting in the error.

//       not called because it is shadowed
import { updateProfile } from "../login_components/LoginActions.js";

// ...
        let { user, logOutUser, updateProfile } = useContext(AuthContext);
                                          ^
        // ...                            |
                                          | // refers to this which is undefined
        updateProfile(updatedProfile); <--|
// ...

Removing it would probably resolve the issue:

import { updateProfile } from "../login_components/LoginActions.js";
         |
// ...____
      |  let { user, logOutUser } = useContext(AuthContext);
      |                                   
      |  // ...                            
      |                                   
      |->updateProfile(updatedProfile);
// ...