Lifting state up does not work in React native-CodePudding

I probably misunderstood something very basic here. I want to run a method in my child component whenever the state "oranges" in my parent component changes.

My Child component looks like this:

  const [someText, setSomeText] = useState(props.oranges); 

  const consoleThis= () => {
    if (someText == true){
        console.log("win!")
    }else{
      return
    }
};

useEffect(() => {
  consoleThis();
}, [someText]);

This is the code in my parent component

...
const [apples, setApples] = useState(false); 

<child
  oranges ={apples}
/>

...
<Pressable
    onPress={() => {
       setApples(true);
    }
>

Any ideas why I don't get my "win!" console logged?

CodePudding user response：

useState(initial) doesn't reset the state each time the value passed to it changes - it is only used for setting the initial state of the value. Passing a new prop value will not update the state variable value - the state value becomes its own copy of the initial value that is managed independently of the prop value. In general, when you're lifting the state up, you don't want to also be keeping state in your child component. Instead, just drive the child component off of the state value passed via props.

You probably want something that responds to changes in the orange prop, like this:

function ChildComponent({orange}) {
  useEffect(() => {
    if (orange) {
      console.log("win!")
    }
  }, [orange])
};