CODEWITHSUNDEEP
javascriptreactjsreact-native
Dhruva
Dhruva

Reputation: 40

Invalid hook call. Hooks can only be called inside of the body of a function component. How to solve this issue?

***I Have made my customized AuthContext which makes API Calls for Singnin and SignOut page, Basically there are functions inside the AuthContext, Which I want to call inside this below class Component

So will see this I have destructured singOutFunction using this code inside class component with below code const {state, signOutFunction, clearMessage}=useContext(AuthContext)

Please tell me what i am doing wrong and also tell me where to destructure my signOutFunction in side the class component

import React,{useContext} from 'react';
import {View, StyleSheet, ScrollView, ToastAndroid, Alert} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import ProfileTab from './ProfileTab';
import {BackHeader} from '../components/Headers';
import {RoundButtonArray, SignOutBtn} from '../components/Buttons';
import {btnArray} from '../helpers/MapInputs';
import FlatButton from '../components/FlatButton'
import Spacer from '../components/Spacer';
//////////////////////////////////////////////////////////////////////////////////

**import {Context as AuthContext} from '../context/AuthContext'**

const dummyText = {
  name: 'Dhruva H',
  email: '[email protected]',
  prep: 'CET',
};


class Profile extends React.Component {
const {state, signOutFunction, clearMessage}=useContext(AuthContext)
    
//   signOutPress = async () => {
//     await AsyncStorage.clear();
//     this.props.navigation.navigate('LoadStack');
//     ToastAndroid.show('Signed Out!', ToastAndroid.SHORT);
//   };

  onSignOut = async () => {
   
    
    Alert.alert(
      'Sign out',
      'Are you sure you want to Sign out?',
      [
        {
          text: 'Cancel',
          onPress: () => null,
          style: 'cancel',
        },
        {text: 'OK', onPress: signOutFunction()},
      ],
      {cancelable: true},
    );
  };

  onImagePress = () => {
    ToastAndroid.show('Hi', ToastAndroid.SHORT);
  };

  render() {
   
    return (
      <View style={styles.container}>
        <BackHeader
          route="Home"
          title="PROFILE"
          type="row"
          backIcon="ios-arrow-dropright"
        />
        <ScrollView>
          <ProfileTab data={dummyText} imagePress={this.onImagePress} />
          <RoundButtonArray btnArray={btnArray} />
          <Spacer/>
          <FlatButton name="Log Out" onClick={this.onSignOut}/>
          
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default Profile;
// <SignOutBtn onSignOut={this.onSignOut} />

Upvotes: 0

Views: 242

Answers (1)

bjjeong
bjjeong

Reputation: 206

Like mentioned in the comments, you're going to have to convert your class based component into a functional component as such,

function Profile() {
    const { state, signOutFunction, clearMessage } = useContext(AuthContext);

    const onSignOut = async () => {
        Alert.alert(
            'Sign out',
            'Are you sure you want to Sign out?',
            [
                {
                    text: 'Cancel',
                    onPress: () => null,
                    style: 'cancel',
                },
                { text: 'OK', onPress: signOutFunction() },
            ],
            { cancelable: true }
        );
    };

    const onImagePress = () => {
        ToastAndroid.show('Hi', ToastAndroid.SHORT);
    };

    return (
        <View style={styles.container}>
            <BackHeader route="Home" title="PROFILE" type="row" backIcon="ios-arrow-dropright" />
            <ScrollView>
                <ProfileTab data={dummyText} imagePress={onImagePress} />
                <RoundButtonArray btnArray={btnArray} />
                <Spacer />
                <FlatButton name="Log Out" onClick={onSignOut} />
            </ScrollView>
        </View>
    );
};

Upvotes: 2

Related Questions