Home > Mobile >  How to trigger if-else condition using buttons?
How to trigger if-else condition using buttons?

Time:10-31

So I've got this homework to check if the score can passed the exam or not below here is my code:

import React, {useState} from 'react';
import {
  Text,
  View,
  Image,
  TextInput,
  Button,
  StyleSheet,
  Alert,
} from 'react-native';
const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

class ComponentAction {
  static onPressButton() {
    if (setScore < 50) {
      Alert.alert('Sorry! You failed the test');
    } else {
      Alert.alert('Congrats! You passed the test');
    }
  }
}
const AppTextInput = () => {
  const [score, setScore] = useState('');
  return (
    <View>
      <Text>Score</Text>
      <TextInput
        placeholder="Input your score here"
        keyboardType="numeric"
        value={score}
        style={styles.input}
        onChangeText={score => setScore(score)}
      />

      <Button title="Submit" onPress={() => ComponentAction.onPressButton()} />
    </View>
  );
};
export default AppTextInput;

it kept saying they can't find the variables. I'm kinda new to React Native stuff and I really appreaciate if you guys can help me

CodePudding user response:

You implemented it but in the wrong way. the handler function should be inside of your AppTextInput. If you want to pass it from another component, it's a different thing. But with current implementation:

const AppTextInput = () => {
  const [score, setScore] = useState('');
  
  const onPressButton = () => {
    if (setScore < 50) {
      Alert.alert('Sorry! You failed the test');
    } else {
      Alert.alert('Congrats! You passed the test');
    }
  }

  return (
    <View>
      <Text>Score</Text>
      <TextInput
        placeholder="Input your score here"
        keyboardType="numeric"
        value={score}
        style={styles.input}
        onChangeText={score => setScore(score)}
      />

      <Button title="Submit" onPress={onPressButton} />
    </View>
  );
};

Just need to define the onPressButton handler inside of your AppTextInput component.

  • Related