TypeError: _this.setState is not a function-CodePudding

I'm fairly new to react native and have been working on a new app. When I try to get user input from two text fields using this.setState I get given the error "not a function" which is extremely confusing because this was working before...?

If someone could shed some light I'd be very grateful!

import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Image,
} from 'react-native';
import CheckBox from '@react-native-community/checkbox'; 
import SplashScreen from 'react-native-splash-screen';

function SignIn({ navigation }){

  this.state = {

    username : "",
    password : ""

  };

    return (
      <View style={styles.body}>
      <Text style={styles.trybetext}> trybe </Text>
      <Text style={styles.nyoftext}>Not Your Ordinary Family</Text>
      <TextInput
          style={styles.username}
          label="username"
          placeholder="Email or Username"
          onChangeText={(value) => this.setState({username: value})}/>
      <TextInput 
          style={styles.password}
          title="password"
          placeholder="Password"
          onChangeText={(value) => this.setState({password: value})}/>
      <CheckBox
      value={false}
      disabled={false}
      style={styles.checkbox}
      />
      <Text style={styles.rememberme}>Remember Me</Text>
      <Text style={styles.forgetpassword}> Forget Your Password? </Text>
      <TouchableOpacity style={styles.loginbutton} onPress={() => navigation.navigate('Confirmation')}>
      <Text style={styles.buttonText}>Log In</Text>
      </TouchableOpacity>
      <Text>{"username ===> " this.state.username}</Text>
      <TouchableOpacity style={styles.loginbuttongoogle}>
      <Text style={styles.buttonTextgoogle}>Sign In with Google</Text>
      </TouchableOpacity>
      <Image 
        style={styles.googleIcon}
        source = {require('../android/app/src/img/googleIcon.png')}/>
      <TouchableOpacity style={styles.loginbuttonfacebook}>
      <Text style={styles.buttonText}>Sign In with Facebook</Text>
      <Image 
        style={styles.facebookIcon}
        source = {require('../android/app/src/img/facebookIcon.png')}/>
      </TouchableOpacity>
      <TouchableOpacity style={styles.loginbuttonapple}>
      <Text style={styles.buttonText}>Sign In with Apple</Text>
      <Image 
        style={styles.appleIcon}
        source = {require('../android/app/src/img/appleIcon.png')}/>
      </TouchableOpacity>
      <Text style={styles.text} onPress={() => alert(username)}>Do not have an account? Create Account</Text>
    </View>
    )
  }```

CodePudding user response：

This is not the right way of using state in a functional component. You need to use useState hook to maintain your state

for example

function SignIn({ navigation }) {
  const [username, setUserName] = useState('');
  const [password, setPassword] = useState('');

  // .... your rest of the code
}

and you can set the state as follows

<TextInput
 style={styles.username}
 label="username"
 placeholder="Email or Username"
 value={username}               // ===> the state value
 onChangeText={(value) => setUserName(value)}  // ====> changing value of username
/>

You can do the same for password field.

Also if you need further guidance please refer to Official Docs

CodePudding user response：

use hooks to define state in functional components. Below code will help you out.

import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Image,
} from 'react-native';
import CheckBox from '@react-native-community/checkbox'; 
import SplashScreen from 'react-native-splash-screen';
import {useState} from 'react';

function SignIn({ navigation }){

  const [state,setState] = useState({
    username : "",
    password : ""
  });

    return (
      <View style={styles.body}>
      <Text style={styles.trybetext}> trybe </Text>
      <Text style={styles.nyoftext}>Not Your Ordinary Family</Text>
      <TextInput
          style={styles.username}
          label="username"
          placeholder="Email or Username"
          onChangeText={(value) => setState({...state,username: value})}/>
      <TextInput 
          style={styles.password}
          title="password"
          placeholder="Password"
          onChangeText={(value) => setState({...state,password: value})}/>
      <CheckBox
      value={false}
      disabled={false}
      style={styles.checkbox}
      />
      <Text style={styles.rememberme}>Remember Me</Text>
      <Text style={styles.forgetpassword}> Forget Your Password? </Text>
      <TouchableOpacity style={styles.loginbutton} onPress={() => navigation.navigate('Confirmation')}>
      <Text style={styles.buttonText}>Log In</Text>
      </TouchableOpacity>
      <Text>{"username ===> " state.username}</Text>
      <TouchableOpacity style={styles.loginbuttongoogle}>
      <Text style={styles.buttonTextgoogle}>Sign In with Google</Text>
      </TouchableOpacity>
      <Image 
        style={styles.googleIcon}
        source = {require('../android/app/src/img/googleIcon.png')}/>
      <TouchableOpacity style={styles.loginbuttonfacebook}>
      <Text style={styles.buttonText}>Sign In with Facebook</Text>
      <Image 
        style={styles.facebookIcon}
        source = {require('../android/app/src/img/facebookIcon.png')}/>
      </TouchableOpacity>
      <TouchableOpacity style={styles.loginbuttonapple}>
      <Text style={styles.buttonText}>Sign In with Apple</Text>
      <Image 
        style={styles.appleIcon}
        source = {require('../android/app/src/img/appleIcon.png')}/>
      </TouchableOpacity>
      <Text style={styles.text} onPress={() => alert(state.username)}>Do not have an account? Create Account</Text>
    </View>
    )
  }