Map function in React Router v5 causes no error yet doesn't work

Question

First post, please have mercy.

Map function returns no error, yet categories which I attempt to map wont load. console.log - returns respective paths in desired format eg. "/all" ; "/clothes" and "/tech". I tried getting rid of console.log, return (), changing "" to '', restarting the server with no result.

CategoryPage element itself loads when loading from /Categories, so the "hardcoded" routing works. All the other routes work fine too.

I also tried to put the entire map bit outside render and console.log it to see if does anything at all and yes it does - it returned bunch of data in a weird format, but that is (I think) due to JSX.

Desired output: to load CategoryPage when accessing /all, /clothes and /tech with appropriate props passed down.

I really do appreciate your time trying to help me <3

render() {
    const pathArr = Object.entries(this.props.categories);
    console.log(pathArr);

    return (
      <ApolloProvider client={client}>
        <Router>
          <div className="App">
            <NavBar />
            <div className="content">
              <Switch>
                {pathArr.map((elem) => {
                  return (
                    (
                      <Route
                        key={elem}
                        exact
                        path={`"/${elem[1].name}"`}
                      >
                        <CategoryPage category={elem[1].name} />
                      </Route>
                    ) && console.log(`"/${elem[1].name}"`)
                  );
                })}

                <Route path="/Categories">
                  <CategoryPage />
                </Route>

                <Route exact path="/cart">
                  <Cart />
                </Route>
                <Route exact path="/product/:id" component={PDP} />
              </Switch>
            </div>
          </div>
        </Router>
      </ApolloProvider>
    );
  }

What version of React are you using? If you run `npm list react react-router react-router-dom` from the project's root directory what are the installed versions reported back? Does this help answer your question? https://stackoverflow.com/a/71833424/8690857 — Drew Reese, Jun 29 '22 at 03:38
react@18.1.0 deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" from node_modules/react-router/node_modules/mini-create-react-context. Router v5 doesn't seem to support react 18. Thank you sir! I will rewrite my code for Router v6 and see if fixes the issue. — Ponny, Jun 29 '22 at 10:33

Drew Reese · Accepted Answer · 2022-06-29T04:48:39.830

The issue it seems is that the pathArr array mapping is returning a boolean expression and it's the result of the final operand that is the mapped value. In other words it's returning effectively JSX && console.log(some value). Since the JSX is truthy and the condition is a logical AND (&&) the expression is continued to be processed and the console.log(`"/${elem[1].name}"`) is invoked. console.log is a void return, i.e. it returns undefined.

You should not invoke unintentional side-effects in the render method. Typically you should use one of the component lifecycle methods, i.e. componentDidUpdate, to issue side-effects.

For the sake of answering your question though I'll assume you are only logging for "debugging purposes"; you can move the console.log to be called prior to the mapped return value.

You'll also want to compute correct route paths, path={`"/${elem[1].name}"`} will inject literal quotations into the path value, i.e. '"/someName"' when really you want just '/someName' for the path. Use path={`/${elem[1].name}`} instead.

Example:

render() {
  const pathArr = Object.values(this.props.categories); // array of values
  console.log(pathArr);

  return (
    <ApolloProvider client={client}>
      <Router>
        <div className="App">
          <NavBar />
          <div className="content">
            <Switch>
              {pathArr.map((elem) => {
                console.log(`/${elem.name}`); // log here
                return (                      // then return JSX
                  <Route
                    key={elem}
                    exact
                    path={`/${elem.name}`}
                  >
                    <CategoryPage category={elem.name} />
                  </Route>
                ); 
              }}

              <Route path="/Categories">
                <CategoryPage />
              </Route>

              <Route exact path="/cart">
                <Cart />
              </Route>
              <Route exact path="/product/:id" component={PDP} />
            </Switch>
          </div>
        </div>
      </Router>
    </ApolloProvider>
  );
}

I did attempt to run it without no console.log with no success. I did update the expression as you suggested, still doesn't work yet. I will update to v6 and will see if it sorts the issue. I will report back once it's done. Thank you sir. — Ponny, Jun 29 '22 at 10:39
After breaking the app several times trying to update to Router v6 and downgrade to React 17 simple npm audit fix with your syntax correction fixed everything. I'm still running 5.3.3 with 18.2 but now routing works as intended. Be blessed kind sir. — Ponny, Jun 29 '22 at 11:58
@Ponny Yeah, there was an issue with RRDv5 and React18 that was fixed in `react-router-dom@5.3.3`. Glad to assist. Cheers and good luck! — Drew Reese, Jun 29 '22 at 15:43

Map function in React Router v5 causes no error yet doesn't work

1 Answers1