React JS - How to refs data to another component using navigate in React JS?

Question

Hello Community I need help. I want pass the data from one component to another component. But in my case I want to pass data and navigate another component see the below code.

Component No-1 (Sender Component)

const sendOtp = async () =>{
    
    if(validForm()){
       let url = 'http://localhost:8080/users/email-send'

       const data = {
          email: emailRef.current.value,
      };
      console.log("email data",data)
       let options={
            method: "POST",
            url: url,
            headers:{
                'content-type': 'application/x-www-form-urlencoded'
            }, 
            data: qs.stringify(data), 
       }

       try{
           let response = await axios(options)
           let record = response.data;
           console.log("res",record)
           if(record.statusText == 'Success'){
               toast.success(record.message);
                setTimeout(()=>{
                    navigate('/change-password',<ChangePassword data = {data}/>)
                },6000)
           }
           else{
            toast.error(record.message);
           }
       }
       catch(e){
            toast.error("Something went wrong..!");
       }
    }else{
        toast.error("Form Invalid..!");
    }
}

Component No-2 (Receiver Component)

 const ChangePassword = (props) => {

     const submitButton = async () =>{
    
    if(validForm()){
        Object.assign(inputField,props)
        console.log("Data from password",inputField,props)
        let url = 'http://localhost:8080/users/change-password'
       let options={
            method: "POST",
            url: url,
            headers:{
                'content-type': 'application/x-www-form-urlencoded'
            }, 
            data: qs.stringify(inputField),  
       }

       try{
           let response = await axios(options)
           console.log("inputField",options);
           if(response.status == 200){
               toast.success("Password Change Sucessfully");
               setTimeout(() => {
                navigate('/login');
               }, 2000);
           }
       }
       catch(e){
            toast.error("Something went wrong..!");
       }
    }else{
        toast.error("Form Invalid..!");
    }
}
}

I want pass the data from one component to another component. Thanks in advance.

Answer 1

Pass the data in navigation like navigate('/change-password',{state:data})

Access the data using UseLocation hook, const {state} = useLocation()