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.