How to pass value to constructor this.setstate in react native - reactjs

Question

Currently I want to setState of userId inside the constructor. The thing I want is to get the firebase.auth.currentUser.uid stored to the userId when Login is successful or handleLogin called.
I have a poor knowledge in Programming. So please ignore the other errors in the programs.
My code:
import React from 'react';
import { StyleSheet,
Text,
View,
TouchableOpacity,
AsyncStorage,
} from 'react-native';
import {RkTextInput, RkButton } from 'react-native-ui-kitten';
import {Actions} from 'react-native-router-flux';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import Profile from "../Profile/Profile";
import SignUp from '../SignUp/SignUp';
import * as firebase from 'firebase';
export default class Login extends React.Component {
constructor(props){
super(props)
this.state=({
email:'savadks1919#gmail.com',
password:'123123',
userId:'',
errorMessage: null
})
}
componentDidMount() {
this._loadInitialState().done();
}
_loadInitialState = async () => {
let value= await AsyncStorage.getItem(this.state.userId)
}
signup() {
Actions.signup()
}
Home() {
Actions.home()
}
handleLogin = (email, password, userId) => {
firebase.auth().signInWithEmailAndPassword(email, password).then(
this.setstate ({
userId: firebase.auth().currentUser.uid
}),
alert(this.state.userId)
).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.titleText}>Taams</Text>
<Text style={styles.edition}>Developer's Edition</Text>
<Text style={styles.titleText}>Login.js</Text>
<Text>Alpha 0.0.0.1</Text>
{/*-----UserName Input-------*/}
<RkTextInput
rkType= 'rounded'
labelStyle= {{color: 'black', fontWeight: 'bold'}}
placeholder='UserName'
//--------------value Handler----------------//
onChangeText={(email) => this.setState({email})}
//---------------------------------//
selectionColor="#000000"
keyboardType="email-address"
onSubmitEditing={() => { this.password.focusInput(); }}
inputStyle={{
color: 'black',
fontWeight: 'bold',
}}/>
{/*-----Password-------*/}
<RkTextInput
secureTextEntry={true}
rkType= 'rounded'
placeholder='Password'
//--------------value Handler----------------//
onChangeText={(password) => this.setState({password})}
//---------------------------------//
ref={(input) => { this.password = input; }}
inputStyle={{
color: 'black',
fontWeight: 'bold',
}}/>
<RkButton onPress = {()=>this.handleLogin(this.state.email,this.state.password)}>
<Text style={styles.LoginButtonText}>Login</Text>
</RkButton>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>Don't have an account yet?</Text>
<TouchableOpacity onPress={this.signup}><Text style={styles.signinButton}>SignUp</Text></TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
signupTextCont:{
flexGrow: 0,
alignItems:'center',
justifyContent:'flex-end',
marginVertical:15
},
signupText:{
color:'rgba(64,64,64,0.6)',
fontSize:16
},
signinButton:{
color:'#000000',
fontSize:16,
fontWeight:'500'
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
},
edition: {
fontSize: 15,
//fontWeight: 'bold',
},
TextInput: {
width: 300,
height:50,
borderColor: 'grey',
borderWidth: 1,
},
LoginButtonText: {
fontSize: 20,
fontWeight: 'bold',
color: 'white',
//alignItems: 'center'
},
});

Answer 1

If you are coming from different screen with navigation on login screen then you need to pass userId in Params of react-navigation like this
this.props.navigation.navigate('Login', params)
and get these params in your constructor like this to get the userId
this.props.navigation.getParams('params')
if you are on the login screen and calling your auth function for authentication of user and also you need this Data in your component then you need to setState on the response of your auth function
setState({userData: res})
Or you can do initialisation inside constructor
this.state={ userId: firebase.auth.currentUser.uid }