Reputation: 73
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
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
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
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