TypeError: undefined is not an object (evaluating 'this.state.Gas') in React Native

user_14459898 0
Viewed 2459

Developing an app in react native I try to make a dynamic alert with the data of the client and the type of the product, but when I try to build the variable concatenating the string I get this error.

TypeError: undefined is not an object (evaluating 'this.state.Gas')

here is the relevant parts of my code:

render:

render() {
    return (
      <ScrollView style={styles.container}>
        <Text style={styles.Titulo}>Pide tu cilindro!</Text>
        <View style={styles.cuadros}>
          <View style={styles.gas}>
            <Image
              source={require("./assets/licuado-2kg.png")}
              style={{ height: 170, width: 170 }}
            />
          </View>
          <View style={styles.texto}>
            <Text style={styles.cilindros}>GASCO 2 kg</Text>
            <TouchableOpacity
              style={styles.btnpedir}
              onPress={this.confirm}
            >
              <Text style={styles.pedir}>Pedir</Text>
            </TouchableOpacity>
          </View>
        </View>
        
      </ScrollView>
    );
  }
}

Constructor:

constructor(props) {
    super(props);
    this.state = {
      email: "",
      displayName: "",
      Ciudad: "",
      Comuna: "",
      Direccion: "",
      Gas: "GASCO 2 kg"
    };
  }

Function:

confirm() {
    let variable = this.state.Gas
    let datos = this.state.displayName + this.state.Ciudad + this.state.Comuna + this.state.Direccion
    let texto = "Deseas confirmar el pedido de: ".concat(variable, " a: ", datos)
    Alert.alert(
      "Confirmar pedido",
      texto,
      [
        {
          text: "Confirmar",
          onPress: () => console.log("Confirmar"),
        },
        {
          text: "Editar datos",
          onPress: () => console.log("Editar"),
        },
        {
          text: "Cancelar",
          onPress: () => console.log("Cancelar"),
          style: "cancel",
        }
      ],
      { cancelable: false }
    );
  }

ComponentDidMount:

componentDidMount() {
    const { email, displayName } = firebase.auth().currentUser;
    this.setState({ email, displayName });

    firebase
      .firestore()
      .collection("Users")
      .where("Email", "==", email)
      .get()
      .then((snapshot) => {
        this.setState({ Doc: snapshot.docs[0].id });
        firebase
          .firestore()
          .collection("Users")
          .doc(this.state.Doc)
          .get()
          .then((doc) => {
            this.setState({
              Ciudad: doc.data().City,
              Direccion: doc.data().Direction,
              Comuna: doc.data().Comuna,
            });
          });
      });
  };

how can I solve this??

react-native reactjs javascript
3 Answers
user_45323940

React handlers are not automatically bound to the element/class they are in. To do so you can bind them in your constructor by using following piece of code:

this.confirm = this.confirm.bind(this)

You can also use ES6 as another alternative, For Example:

<Button onClick={() => this.onConfirm()}
user_100553000

According to your given code. In your code constructor

constructor(props) {
  super(props);
  this.state = {
    email: "",
    displayName: "",
    Ciudad: "",
    Comuna: "",
    Direccion: "",
    Gas: "GASCO 2 kg"
  };
}

You have predefined the 'GAS' state but we do not find 'Gase'. Is it a typo issue or else? if No, then you can change the constructor to

constructor(props) {
  super(props);
  this.state = {
    email: "",
    displayName: "",
    Ciudad: "",
    Comuna: "",
    Direccion: "",
    Gas: "GASCO 2 kg",
    Gase: "",
  };
}

Then you update in the componentDidMount or elsewhere. For further you may check React's State and Lifecycle

user_42785140
Related