CODEWITHSUNDEEP
javascriptreactjs
ShaheerDevOps
ShaheerDevOps

Reputation: 51

Cannot Pass Props to another component in React Native

I am creating a chatApp in React Native but I have encountered a problem in which the state is not getting passed to the other component as a prop.

ERROR MESSAGE:

ReferenceError: props is not defined

I have had it working in my other projects, This is the only time I have encountered this problem. I will be very grateful for your help.

SIGNIN.JS:

import React from "react";
import firebase from 'firebase'
import { Platform, StyleSheet, Text, View, TextInput, Button, Alert, Linking } from "react-native";
import Chatroom from "./chatroom";

export default class SignIn extends React.Component {

  constructor(props) {
      super(props)
      this.state = {
        Email: '',
        Password: '',
      }
  }

  signinfunc = () =>{
      const { Email }  = this.state ;
      const { Password } = this.state ;
      firebase.auth().signInWithEmailAndPassword(Email, Password)
      .then((user) => {
      // Signed in
      Linking.openURL('/chatroom')
      })
      .catch((error) => {
       var errorCode = error.code;
       var errorMessage = error.message;
       alert(errorMessage)
      });
      }


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>
         Sign-In
        </Text>

        <TextInput
          style={{height: 45,width: "95%",borderColor: "gray",borderWidth: 2}}
          placeholder=" Enter Email Address"
          //set the value in state.
          onChangeText={Email => this.setState({Email})}
          underlineColorAndroid="transparent"
        />

        <TextInput
          style={{height: 45,width: "95%",borderColor: "gray",borderWidth: 2}}
          placeholder=" Enter Password"
          //set the value in state.
          onChangeText={Password => this.setState({Password})}
          underlineColorAndroid="transparent"
        />

        <View style={[{ width: "93%", margin: 15, backgroundColor: "red" }]}>
          <Button
          onPress={this.signinfunc}
          title="Login"
          color="#00B0FF"
          />
        </View>
        <Chatroom email={this.state.Email} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  }
});

CHATROOM.JS:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';


export default function Chatroom() {
  return (<>
  <Text> {props.email}</Text>
</>);
}

const styles = StyleSheet.create({

});

Upvotes: 0

Views: 393

Answers (2)

Manish
Manish

Reputation: 11

You should avoid this keyword in functional component and use props as a parameter

export default function Chatroom(props) {
  return (
    <>
      <Text> {props.email}</Text>
    </>
  );
}

Upvotes: 1

michael
michael

Reputation: 4173

Chatroom is function component so you should get props as parameter.

export default function Chatroom(props) {
  return (<>
     <Text> {props.email}</Text>
  </>);
}

Upvotes: 1

Related Questions