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.