const { userChoice } = props;

  useEffect(() => {
    if (currentGuess === 60) {
      console.log(userChoice);
    }
  });

The above code works fine

const { userChoice } = props;

  useEffect(() => {
    if (userChoice === 60) {
      console.log(userChoice);
    }
  });

The above does not work. Also, the one below does not work

const { userChoice } = props;

  useEffect(() => {
    if (currentGuess === userChoice) {
      console.log(userChoice);
    }
  });

Everytime I include userChoice in the condition, code will not work. What I want to achieve is for console.log to run when currentGuess equals userChoice. But everytime I include userChoice in the condition, code does not work. Please help

import React, { useState, useRef, useEffect } from "react";
import { View, Text, StyleSheet, Button, Alert } from "react-native";
import Card from "../component/Card";
import NumberContainer from "../component/NumberContainer";

function suggestedNumber(min, max, excNumber) {
  const rndNumber = Math.floor(Math.random() * (max - min)   min);
  if (rndNumber === excNumber) {
    return suggestedNumber(min, max, excNumber);
  } else {
    return rndNumber;
  }
}
function randomNumber(min, max) {
  const randNumber = Math.floor(Math.random() * (max - min)   min);
  return randNumber;
}

function GameScreen(props) {
  const lowerNumber = useRef(1);
  const higherNumber = useRef(100);
  const [currentGuess, setCurrentGuess] = useState(
    suggestedNumber(lowerNumber.current, higherNumber.current, props.userChoice)
  );
  const { userChoice } = props;

  useEffect(() => {
    if (currentGuess === userChoice) {
      console.log(userChoice);
    }
  }, [currentGuess, userChoice]);
  function suggestLower(e) {
    if (currentGuess < props.userChoice && e === "lower") {
      Alert.alert("Wrong", "Number needs to be higher", [
        {
          text: "Close",
          style: "cancel",
        },
      ]);
    } else {
      higherNumber.current = currentGuess;
      setCurrentGuess(randomNumber(lowerNumber.current, higherNumber.current));
    }
  }

  function suggestHigher(e) {
    if (currentGuess > props.userChoice && e === "greater") {
      Alert.alert("Wrong", "Number needs to be lower", [
        {
          text: "Close",
          style: "cancel",
        },
      ]);
    } else {
      lowerNumber.current = currentGuess;
      setCurrentGuess(randomNumber(lowerNumber.current, higherNumber.current));
    }
  }

  return (
    <View style={styles.mainDisplay}>
      <Text>Opponent's Guess</Text>
      <NumberContainer>{currentGuess}</NumberContainer>
      <Card style={styles.buttonContainer}>
        <Button title="Lower" onPress={suggestLower.bind(this, "lower")} />
        <Button title="Greater" onPress={suggestHigher.bind(this, "greater")} />
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  mainDisplay: {
    alignItems: "center",
    alignContent: "space-between",
    height: 200,

    justifyContent: "space-between",
  },
  buttonContainer: {
    justifyContent: "space-between",
    flexDirection: "row",
    width: "70%",
    paddingVertical: 20,
  },
});

export default GameScreen;

CodePudding user response：

EDIT: The above problem statement is not enough to identify the issue, can you elaborate more?

I think you should add a dependency array as the second argument to useEffect hook like this:

useEffect(() => {
    if (currentGuess === userChoice) {
        console.log(userChoice);
    }
}, [currentGuess, userChoice]);

This ensures that your callback method will be executed whenever your variables in the dependency array (i.e., [currentGuess, userChoice]) changes.

CodePudding user response：

What is the value of UserChoice? That is causing it to "not work". You are using === so it will also need to be the same data type.

CodePudding user response：

Thank you, I found my mistake. The value of userChoice is from a <TextInput> field. I added a parseInt(userChoice) and it worked. Thank you