How do you pass state variables between two separate functional components in React Native?

 function passVar(){

 const [pass1,setPass1]=useState("")
 const [pass2,setPass2]=useState("")
 const [pass3,setPass3]=useState("")


  return(
  //gets values of these "pass" variables from a text input inside this return function
  );

}

function recieveVar(){

 const [pass4,setPass4]=useState("")
 const [pass5,setPass5]=useState("")


const computeVar = ()=>{


exampleFunction(
pass1,
pass2,
pass3,
pass4,
pass5

)

}

  return(
        //gets values of these "pass" variables from a text input inside this return function



  );

 }



}

I don’t know react native that well and I need help with the code writing itself. I tried using useContext() but it was written in react and I’m a beginner so I don’t really understand how to implement it. Also, there are no parent functions for this piece of code and both functions are in the same file. I need someway to first pass the state variables from the “passVar” function into the “recieveVar” function. I made a parent function called “parent” that encompasses both functions and declared the state variables inside the parent function but there was a problem because Stack Navigator said that it couldn’t find the recieveVar and passVar function since they were child components

Answer

You can pass state variables between two functional components using props. You can declare state variable in your PassVar like:

const [pass1,setPass1]=useState("")
const [pass2,setPass2]=useState("")
const [pass3,setPass3]=useState("")

and then pass these to RecieveVar() by rendering receivevar inside your Passvar function and then passing these values as params like:

<ReceiveVar pass1={pass1} pass2={pass2} pass3={pass3} />

then you can receive these values inside RecieveVar() like:

RecieveVar(props){
      console.log(props.pass1);
      console.log(props.pass2);
      console.log(props.pass3);
    };

If you are not rendering RecieveVar inside PassVar then you can send these values to receiveVar using navigation. Like:

navigation.navigate('RecieveVar',{pass1,pass2,pass3});

then you can receive these values inside receiveVar() as :

const ReceiveVar(props){
 const {pass1,pass2,pass3}=props.route.params;
    console.log(pass1);
    console.log(pass2);
    console.log(pass3);
 }