CODEWITHSUNDEEP
reactjsreact-native
Ijaz Ali
Ijaz Ali

Reputation: 73

How to check null condition in react Native

Like normally we write 

if(num1==""){
do nothing
}else{
do something}

how do we write it in react native syntax, below is my code

I already tried a lot but failed to get the point why is it giving an error

import * as React from 'react';
import { Text, View, StyleSheet, TextInput, Button, Alert } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  state = {
    num1 : "",
     num2 : "",
     result: ""
  }

  addBtnPressed = () => {
    this.setState({
      if({num1 == "" || num2 == ""}){
        alert('Field Empty')
      }else{
        result: eval(this.state.num1 +"+"+ this.state.num2)
      }
     });
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput 
          keyboardType={"numeric"}
          placeholder="Enter 1st Number" 
          onChangeText={num1 => this.setState({num1})}/>

        <TextInput 
          keyboardType={"numeric"}
          placeholder="Enter 2nd Number" 
          onChangeText={num2 => this.setState({num2})}/>
        <Button title="ADD" onPress={this.addBtnPressed}/>
         <Text>{this.state.result}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Upvotes: 2

Views: 19016

Answers (3)

Gaurav Roy
Gaurav Roy

Reputation: 12243

what you are doing is calling the setState func with if-else upon call of addBtnPressed func and you arent accessing the state variables with the syntax this.state.num1 rather you've used num1 which is causing the error. Since your question is unclear, but from your code i figured out like you need to check if user has entered num1 and num2 otherwise give alert. so you can do this on addBtnPressed :

if(this.state.num1 && this.state.num2){ this.setState({ result: parseInt(this.state.num1) + parseInt(this.state.num2) }); }else{ alert('Field Empty'); }

The above code is short and sweet and would do your work. And a reminder , never use if and else within setState as mentioned by dupocas and ravibugal above.

Upvotes: 0

ravibagul91
ravibagul91

Reputation: 20765

You should not use if-else condition in setState.

Also don't use eval. From this,

It is not recommended to use eval() because it is slow, not secure, and makes code unreadable and maintainable.

Instead you can use parseInt.

addBtnPressed = () => {
    const {num1,num2} = this.state;
    if(num1 === "" || num2 === ""){
        alert('Field Empty')
    }else{
        this.setState({ result: parseInt(num1) + parseInt(num2) }, ()=>console.log(this.state.result))
    }
}

Another way is (Avoidable),

addBtnPressed = () => {
    this.setState( prevState => {
      if(prevState.num1 === "" || prevState.num2 === ""){
        alert('Field Empty')
      }
      return { result: parseInt(prevState.num1) + parseInt(prevState.num2) }
    }, () => console.log(this.state.result));
}

Read more about setState.

Upvotes: 2

Dupocas
Dupocas

Reputation: 21367

You can't use an if statement inside setState

addBtnPressed = () => {
    const { num1, num2 } = this.state
    if(num1 == "" || num2 == "") 
        return alert('Field Empty')  
    this.setState({result: eval(this.state.num1 +"+"+ this.state.num2)})
}

Upvotes: 1

Related Questions