CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Goutham D
Goutham D

Reputation: 33

"Invalid hook call. Hooks can only be called inside of the body of a function component" problem

I get an error in the console as

error!! [Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app*
   import firebase from '../../database/firebase';
   import { useDispatch } from 'react-redux';
   import * as actions from "../../store/actions";

    export const userProfilePcture =(id)=>{
       const image = firebase.storage().ref(id + '/profilePicture');
       var user = firebase.auth().currentUser;
       image.getDownloadURL().then((url) => {
       user.updateProfile({
          photoURL: url
        }).then(() =>{
          console.log("updete succefully");
          updeteUser();
        }).catch(error =>{
         console.log("error!!",error);
        });
    
      });


      };

       export const updeteUser=()=>{
       const dispatch=useDispatch();
       var user = firebase.auth().currentUser;
       dispatch(actions.updateUser(user));
     }

How can I avoid this?

Upvotes: 1

Views: 626

Answers (1)

Grant Singleton
Grant Singleton

Reputation: 1651

This is the hook you are using:

const dispatch=useDispatch();

You can only use hooks inside a React functional component. Right now you are trying to use this hook in a normal javascript function.

Upvotes: 1

Related Questions