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>
);
}
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>
);
}