HOC does not set proper value

Question

I have an issue while creating simple HOC which should redirect to 404 when there are no query params. Otherwise, it should just return a component.

import React, { useState, useEffect } from 'react';
import { Redirect } from 'react-router-dom';

import { api } from '../utils/api';

export default (WrappedComponent, queryParamKey) => {
   return () => {
   const [ paramAvailability, setParamAvailability ] = useState(false);

  useEffect(() => {
    const urlParams = new URLSearchParams(document.location.search);
    const token = urlParams.get(queryParamKey);

    setParamAvailability(!!token);
  });

  return paramAvailability ? (
    <WrappedComponent {...this.props} />
  ) : <Redirect to="/404" />;
  };
};

So every time I'm wrapping a component it redirect to 404 either there are or there are not query params available.

That's weird... That seems to be [exactly how `Redirect` is supposed to be used](https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-the-new-react-router-dom-of-reactjs) — Nino Filiu, Mar 20 '19 at 21:38
What error are you getting? What is not working as expected? — ManavM, Mar 20 '19 at 21:43
As stated above, there is no error, it just redirects every time even though there are params available in URL — Murakami, Mar 20 '19 at 21:44

score 2 · Accepted Answer · edited Mar 20 '19 at 22:11

2

paramAvailability is false by default. useEffect is first called after initial render. So you always Redirect.

To fix your HOC just extract checking logic to a separate function and use it to set the default state:

export default (WrappedComponent, queryParamKey) => {
   return props => {

    function checkParam() {
        const urlParams = new URLSearchParams(document.location.search);
        const token = urlParams.get(queryParamKey);
        return !!token;
    }

   const [ paramAvailability, setParamAvailability ] = useState(checkParam());


  useEffect(() => {
    setParamAvailability(checkParam());
  });

  return paramAvailability ? (
    <WrappedComponent {...props} />
  ) : <Redirect to="/404" />;
  };
};

edited Mar 20 '19 at 22:11

Murakami

3,474
7
35
89

answered Mar 20 '19 at 21:45

UjinT34

4,784
1
12
26

Exactly it is like that but how can I rewrite it in order to get what I need? – Murakami Mar 20 '19 at 21:46
he did rewrite it above - see checkParam and setting the initial useState value – jsdeveloper Mar 20 '19 at 21:53
I get your idea but for some reason I'm getting error: TypeError: Cannot read property 'props' of undefined. – Murakami Mar 20 '19 at 22:03
Sorry, my fault, it is of course functional component so props are without this and needs to be passed as argument – Murakami Mar 20 '19 at 22:08
So then do we really need useEffect here? – Murakami Mar 20 '19 at 22:13

HOC does not set proper value

1 Answers1