Switch render wrong component

My switch renders wrong component even though it matches correct path. I wanted to separate list of components and render them dynamically (from file).

I have index.js with list of components:

index.js

export { default as comp1} from '../dashboards/comp1';
export { default as comp2} from '../dashboards/comp2';

And my paths.jsx return list of routes:

paths.jsx

import * as componentList from './index';
export const paths = (dashboards) => {
    var paths = [];
    for (var i = 0; i < dashboards.length; i++) {
        var ComponentToRender = componentList[dashboards[i]];
        paths.push(<Route key={dashboards[i]} exact path={'/' + dashboards[i]} render={() => <ComponentToRender  />} />)
    }
    return paths;
}

And in app.js is simple switch:

 <Switch >
        {paths(this.state.dashboards)}
</Switch>

But it always returns just the last component to render. The route paths is correct. I can see correct component inserted and correct path. Where is the problem?



Read more here: https://stackoverflow.com/questions/66269496/switch-render-wrong-component

Content Attribution

This content was originally published by 13Akaren at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: