0

I am practicing making the game of stone paper and scissors in react native at the moment it works well but my problem is that the variable "result" does not show me the result of the current game if it is a tie or not if it does not show me the result of the game above, for example if I choose stone and the app also chooses stone it is tie but it does not show me however if I choose stone again and the app chooses paper the result variable shows tie which is from the previous game when its not a tie

this is the code

const RockPaperScissors = () => {

const [userOption, setUserOption] = useState("user")
const [computerOption, setComputerOption] = useState("computer")
const [result, setResult] = useState("")


const options = ["paper", "rock", "scissors"]



const rockOption = () => {
    let choice = Math.floor(Math.random()*3)
    setComputerOption(options[choice])
}


const resultRock = () => {

    setUserOption("rock")

    if (computerOption == userOption){
        setResult("tie")
    } else {
        setResult("no tie")
    }

}

const combineRock = () => {
    rockOption() 
    resultRock() 
}

const RenderComputer = () => {
    if (computerOption == "paper") {
        return (
            <FontAwesome name="hand-paper-o" size={70} color="black" />
        )
    }
    if (computerOption == "rock") {
        return (
            <FontAwesome name="hand-rock-o" size={70} color="black" />

        )
    }
    if (computerOption == "scissors") {
        return (
            <FontAwesome name="hand-scissors-o" size={70} color="black" />
        )
    }


}


return (
    <View style={styles.container} >
        <Text style={styles.title} >
            Rock - Paper - Scissors
        </Text>
        <View style={styles.containerGame} >
            <View style={styles.computer} >
                <Text>Computer Option</Text>
                <RenderComputer/>
            </View>
            <Text>Result: {result}</Text>
            <View style={styles.user} >
                <Text>Your Option</Text>
                <FontAwesome name="hand-rock-o" size={70} color="black" onPress={combineRock}/>
                {/* <FontAwesome name="hand-paper-o" size={70} color="black" onPress={rockOption}/>
                <FontAwesome name="hand-scissors-o" size={70} color="black" onPress={rockOption}/> */}
            </View>
        </View>
    </View>
)

}

Tommy Solano Peñafiel
  • 37
  • 6
  • `setUserOption` doesn't change your `userOption` immediately. It is only upon the next render of your component that `userOption` will hold the new state value that you set. Store the value of the user option in a variable first and then set that: `const uOption = "rock"; setUserOption(uOption); if (computerOption == uOption)` – Nick Parsons Nov 05 '22 at 08:13
  • Also, you should not declare components such as `RenderComputer` within the `RockPaperScissors` component, otherwise, you will face issues with state. Move them outside and pass the data they need to function as props. – Nick Parsons Nov 05 '22 at 08:17

0 Answers0