Component Exception - Can't find variable: direction - react-native

Question

I am trying to run this app in react but it keeps giving me that error that it cannot find the variable direction. How do I solve this. The Code is below.
APP.js
// Importing Libs
import React, {useState} from 'react';
import { StyleSheet, View , SafeAreaView} from 'react-native';
import Header from './APP/Components/Header';
import StartGameScreen from './APP/Screens/StartGameScreen';
import GameScreen from './APP/Screens/GameScreen';
export default function App() {
const [userNumber, setUserNumber] = useState();
const startGameHandler = (selectedNumber) => {
setUserNumber(selectedNumber);
};
let content = <StartGameScreen onStartGame={startGameHandler} />;
if (userNumber) {
content = <GameScreen userChoice={userNumber} />;
}
return (
<View style={styles.screen}>
<Header title="GUESS THE NUMBER" />
{content}
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1
},
});
GameScreen.js
import React, {useState, useRef} from 'react';
import {View , Text , StyleSheet, Button, Alert} from 'react-native';
const generateRandomBetween = (min, max , exclude) => {
min = Math.ceil(min);
max = Math.floor(max);
const rndNum = Math.floor(Math.random() * (max - min)) + min;
if (rndNum === exclude) {
return generateRandomBetween(min, max, exclude);
} else {
return rndNum;
}
};
const GameScreen = props => {
const [currentGuess, setCurrentGuess] = useState(generateRandomBetween(1, 99, props.userChoice));
const currentLow = useRef(1);
const currentHigh = useRef(99);
const nextGuessHandler = direction => {
if ((direction === 'lower' && currentGuess < props.userChoice) || (direction === 'greater' && currentGuess > props.userChoice) ) {
Alert.alert('Don\'t lie to me', 'You Can\'t Trick Me' [{text: 'I won\'t lie again , SORRY!', style: 'cancel'}]);
}
}
if ( direction === 'lower') {
currentHigh.current = currentGuess;
} else {
currentLow.current = currentGuess;
}
const nextNumber = generateRandomBetween(currentLow.current, currentHigh.current, currentGuess);
currentGuess(nextNumber);
return (
<View style={styles.screen}>
<Text>Opponent Guess</Text>
<View style={styles.guessNumberContainer}>
<Text style={styles.guessText}>{currentGuess}</Text>
</View>
<View style={styles.buttonContainer}>
<Button title="LOWER" onPress={nextGuessHandler.bind(this, 'lower')} />
<Button title="HIGHER" onPress={nextGuessHandler.bind(this, 'greater')} />
</View>
</View>
)
};
const styles = StyleSheet.create({
gameScreenContainer: {
width: 300,
maxWidth: '80%',
alignItems: 'center',
shadowColor: 'black',
shadowOffset: { width: 0, height: 2},
shadowRadius: 4,
shadowOpacity: 0.26,
backgroundColor:'#fff',
elevation: 8 ,
padding: 20,
borderRadius: 15,
marginTop: 30
},
guessNumberContainer:{
borderWidth: 2,
borderColor: "#FFC45D",
padding: 10,
borderRadius: 10,
marginVertical: 10,
alignItems: 'center',
justifyContent:'center',
width: 200
},
guessText:{
color: "#FFC45D",
fontSize: 22
},
screen:{
flex: 1,
padding: 10,
alignItems: 'center'
},
buttonContainer:{
width: 300,
maxWidth: '80%',
justifyContent: 'space-between',
alignItems: 'center',
shadowColor: 'black',
shadowOffset: { width: 0, height: 2},
shadowRadius: 4,
shadowOpacity: 0.26,
backgroundColor:'#fff',
elevation: 8 ,
padding: 20,
borderRadius: 15,
flexDirection: 'row',
marginTop: 20
}
});
export default GameScreen;
I have no idea how to fix this , dont even know where to start from. I have tried changing the direction name to something else but still gives an error and i made sure React was imported , i have no idea what i am missing.

Answer 1

Based on the conversation in the comments I assume you want something like this...
const nextGuessHandler = direction => {
if ((direction === 'lower' && currentGuess < props.userChoice) || (direction === 'greater' && currentGuess > props.userChoice) ) {
Alert.alert('Don\'t lie to me', 'You Can\'t Trick Me' [{text: 'I won\'t lie again , SORRY!', style: 'cancel'}]);
}
if ( direction === 'lower') {
currentHigh.current = currentGuess;
} else {
currentLow.current = currentGuess;
}
}
const nextNumber...