About this.state function in React Native App

Question

Hello this is my code. When I try to fill the text box then the error come i.e. ('this.setState is not a function.(In this.setState({emal:email)} this.setState is underfined').

Here is my code:

import React from 'react'; import { Image, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View, TextInput, TouchableHighlight, Alert,

} from 'react-native';

export default function LoginScreen() {

  onClickListener = (viewId) => {
    Alert.alert("Alert", "You can't "+viewId);
  }

return ( https://png.icons8.com/message/ultraviolet/50/3498db'}}/> this.setState({email})}/>

  <View style={styles.inputContainer}>
    <Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}/>
    <TextInput style={styles.inputs}
        placeholder="Password"
        secureTextEntry={true}
        underlineColorAndroid='transparent'
        onChangeText={(password) => this.setState({password})}/>
  </View>

  <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={() => this.onClickListener('login')}>
    <Text style={styles.loginText}>Login</Text>
  </TouchableHighlight>

  <TouchableHighlight style={styles.buttonContainer} onPress={() => this.onClickListener('restore_password')}>
      <Text>Forgot your password?</Text>
  </TouchableHighlight>

  <TouchableHighlight style={styles.buttonContainer} onPress={() => this.onClickListener('register')}>
      <Text>Register</Text>
  </TouchableHighlight>
</View>

); }

const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#DCDCDC',
},
inputContainer: {
    borderBottomColor: '#F5FCFF',
    backgroundColor: '#FFFFFF',
    borderRadius:30,
    borderBottomWidth: 1,
    width:250,
    height:45,
    marginBottom:20,
    flexDirection: 'row',
    alignItems:'center'
},
inputs:{
    height:45,
    marginLeft:16,
    borderBottomColor: '#FFFFFF',
    flex:1,
},
inputIcon:{
  width:30,
  height:30,
  marginLeft:15,
  justifyContent: 'center'
},
buttonContainer: {
  height:45,
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  marginBottom:20,
  width:250,
  borderRadius:30,
},
loginButton: {
  backgroundColor: "#00b5ec",
},
loginText: {
  color: 'white',
}
});

Answer 1

That is the problem

export default function LoginScreen()

Change it to the

export default class LoginScreen extends Component

Answer 2

For using state, it must a stateful component rather than stateless component, So you have to change your functional component into Class.

change

export default function LoginScreen()

to

export default class LoginScreen extends React.Component

Answer 3

In react-native setState function has syntax

this.setState({someField:someValue})

you are using wrong syntax there, you have to give state name and value

this.setState({email})
this.setState({password})

these line should be like -

this.setState({ email: value })
this.setState({password: value })

Answer 4

if you want to use functional components you can use the UseState hook like this by importing and initializing the state as shown below:

 import React,{useState} from 'react'; 
    export default function LoginScreen() {
    const [email,setEmail]=useState(initialValues);
    //setEmail function can be used for changing the state
    }

use can see the usage of the useState here [https://reactjs.org/docs/hooks-state.html]

hope this helps for you

Answer 5

if you want to use functional components use react hooks, otherwise use class component as below.

import React, { Component } from 'react';
import { Image, StyleSheet, Text, View, TextInput, TouchableHighlight, Alert } from 'react-native';

export default class LoginScreen extends Component {

  onClickListener = viewId => {
    Alert.alert('Alert', "You can't " + viewId);
  };

  render() {
    return (
      <View>
        <View style={styles.inputContainer}>
          <Image
            style={styles.inputIcon}
            source={{uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}
          />
          <TextInput
            style={styles.inputs}
            placeholder="Password"
            secureTextEntry={true}
            underlineColorAndroid="transparent"
            onChangeText={password => this.setState({password})}
          />
        </View>

        <TouchableHighlight
          style={[styles.buttonContainer, styles.loginButton]}
          onPress={() => this.onClickListener('login')}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>

        <TouchableHighlight
          style={styles.buttonContainer}
          onPress={() => this.onClickListener('restore_password')}>
          <Text>Forgot your password?</Text>
        </TouchableHighlight>

        <TouchableHighlight
          style={styles.buttonContainer}
          onPress={() => this.onClickListener('register')}>
          <Text>Register</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#DCDCDC',
  },
  inputContainer: {
    borderBottomColor: '#F5FCFF',
    backgroundColor: '#FFFFFF',
    borderRadius: 30,
    borderBottomWidth: 1,
    width: 250,
    height: 45,
    marginBottom: 20,
    flexDirection: 'row',
    alignItems: 'center',
  },
  inputs: {
    height: 45,
    marginLeft: 16,
    borderBottomColor: '#FFFFFF',
    flex: 1,
  },
  inputIcon: {
    width: 30,
    height: 30,
    marginLeft: 15,
    justifyContent: 'center',
  },
  buttonContainer: {
    height: 45,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
    width: 250,
    borderRadius: 30,
  },
  loginButton: {
    backgroundColor: '#00b5ec',
  },
  loginText: {
    color: 'white',
  },
});