That's the exception that I got..and it's does not make sense for me...
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 See fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
this is my component...I am trying to archive just an standard login/password screen...
import React from 'react'
import { View, Text, TouchableWithoutFeedback, TextInput } from 'react-
native'
import style from './style'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faUser, faUnlockAlt } from '@fortawesome/free-solid-svg-icons'
import { Query, useMutation } from 'react-apollo'
import { testQuery, LOGIN_MUTATION } from '../../gql/session'
class LoginForm extends React.Component {
constructor(props) {
super(props)
this.state = {
inProgress: false,
email: '[email protected]',
password: '1234'
}
}
doLogin() {
const [_doLogin ] = useMutation(LOGIN_MUTATION, {
update: (proxy, mutationResult) => {
console.log(mutationResult)
}
,
variables: {
$email: this.setState.email,
$password: this.state.password
}
})
_doLogin()
}
render() {
return (
<View style={style.form}>
<Text style={style.formLabel}>E-Mail</Text>
<View style={style.formRow}>
<FontAwesomeIcon size={28} style={style.formIcon} icon={faUser} />
<TextInput
onChangeText={(email) => this.setState({ email })}
value={this.state.email}
keyboardType={'email-address'}
style={style.textInput} />
</View>
<Text style={style.formLabel}>Password</Text>
<View style={style.formRow}>
<FontAwesomeIcon size={28} style={style.formIcon} icon={faUnlockAlt} />
<TextInput
onChangeText={(password) => this.setState({ password })}
value={this.state.password}
secureTextEntry={true}
style={style.textInput} />
</View>
<TouchableWithoutFeedback onPress={() => { this.doLogin() }}>
<View style={[style.button, style.doLoginButton]}>
<Text style={style.buttonText}>Login</Text>
</View>
</TouchableWithoutFeedback>
<View style={style.bellowButton}>
<TouchableWithoutFeedback onPress={() => this.props.onCancel()}>
<Text style={style.cancel}>Cancel</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this.props.onForgot()}>
<Text style={style.forgot}>Forgot ?</Text>
</TouchableWithoutFeedback>
</View>
</View>
)
}
}
export default LoginForm
So, what's wrong ? and how to archive it ?
The error you are getting is because you are trying to use hooks in class components, so in the docs they have mentioned the following:
You can’t use Hooks inside of a class component, but you can definitely mix classes and function components with Hooks in a single tree. Whether a component is a class or a function that uses Hooks is an implementation detail of that component. In the longer term, we expect Hooks to be the primary way people write React components.
From the fb.me/react-invalid-hook-call link that error gave you:
Hooks can only be called inside the body of a function component.
You have a class component, you need to convert it to functional component in order to use react hooks.
Or if you're used to class components, use Mutation
component from '@apollo/react-components'
.
See more on this link: https://www.apollographql.com/docs/react/api/react-components/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With