TortoiseFeel

Hello,

I was also looking answer for similar question.

Here is the quick solution I found and worked for me, hope it helps you too in some scenario we might mistaking

As in the (a) was getting null as a data response in the react child component (where the text shown “Reset linked expired…”) , where actually data was updating from parent component and passed to react child component named <ResetPasswordForm … /> as ‘data’ as a prop, here its full code look like:

function ResetPassword({ }) {
  const router = useRouter();
  const [resetPasswordData, setResetPasswordData] = useState(null);



  useEffect(() => {
   
    const { query } = router;

    if (query && query?.token && query?.email) {
      console.log(query);
      setResetPasswordData({
        ...query
      });
    }
    return () => {
    }
  }, [router]);

  return (<React.Fragment>
    <GlobalCookieContextProvider>
      <div className="app-page" id="appPageEle">
        <Layout>
          <div className={styles.loginFormWrapper}>
            <div className={styles.loginBox}>
              <div className={styles.loginBoxLeft}>
                <LeftBoxImage />
              </div>

              <div className={styles.loginBoxRight}>
                {JSON.stringify(resetPasswordData, 0, 2)}
                <ResetPasswordForm title={'Reset Password'} data={resetPasswordData} />
              </div>
            </div>
          </div>
        </Layout>
      </div>
    </GlobalCookieContextProvider>
  </React.Fragment>);
}

Solution 1 : To fix the issue of null, I have to remove the wrapping GlobalCookieContextProvider component as I was not passing any prop to it and also I have no use in this Reset Password Main component, so after removing the wrapping Provider component it worked like as expected, Boom!.

Results of JSON output attached to the form

Hence start receiving data from parent react component when state change updated dynamically from URL query params as expected.

But wait, Solution 1, was not working still as expected in certain refreshes, then work around did and moved the all query params check code from nextjs page component to its child level component named ResetPasswordForm component and everything finally working as expected again.

Hope you enjoyed the post, let me know in comments if confused you, will try to re-try to post again.

Happy we learning!

Conclusion

First found the wrapping un-used React Provider component, causing a stop of re-ending of react child component when parent component state update done, but after some further testing its was still breaking, final solution found in moving the router query params check and updating state into the first level child component itself which does the expected checks in useEffect() and render the component fairly with the expected results on query fetch done.