0

This might be a really easy questions but I just can't wrap my head around it ..

This code is for generating a side menu. Now this is only the last of many attempts but since the side menu is quite large, I wanted to somehow automate its generation but no matter what I do, I can't iterate through the array to generate links.

class App extends Component {
render() {
    return (
        <Router>
            <div style={{ display: 'flex' }}>
                <div style={{
                    padding: '10px',
                    width: '40%',
                    background: '#f0f0f0'
                }}>
                    <ul style={{ listStyleType: 'none', padding: 0 }}>
                        routes.forEach(route => {
                            <li><Link to={route.path}>{route.title}</Link>/li>
                        });
                    </ul>

                    {routes.map((route) => (
                        <Route
                            key={route.path}
                            path={route.path}
                            exact={route.exact}
                        />
                    ))}
                </div>
                <div style={{ flex: 1, padding: '10px' }}>
                    {routes.map((route) => (
                        <Route
                            key={route.path}
                            path={route.path}
                            exact={route.exact}
                            component={route.main}
                        />
                    ))}
                </div>
            </div>
        </Router >
    )
}
}

This one is probably the worst try off all but it was a try of desperation.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Havok224
  • 55
  • 5
  • 1
    why are you using `forEach`? did you read the documenation? https://reactjs.org/docs/lists-and-keys.html – azium Jan 05 '19 at 22:27
  • 2
    Possible duplicate of [How to render an array of objects in React?](https://stackoverflow.com/questions/41374572/how-to-render-an-array-of-objects-in-react) – azium Jan 05 '19 at 22:28
  • 1
    Where is `routes` declared ? – Treycos Jan 05 '19 at 22:32
  • Sorry didn't see these .. I had versions of that before , but I just kept changing it hoping something would work ... that was just the last version. Oh and routes at the time was just a small test array I made in the same folder – Havok224 Jan 05 '19 at 23:34

1 Answers1

1

try:

routes.map(route => (<li key={route.path}> <Link to={route.path}>{route.title}</Link> </li>));

corolla
  • 5,386
  • 1
  • 23
  • 21
  • 2
    is your code inside of the return block? I would format a proper JSX block since it looks like OP is missing the opening brace – azium Jan 05 '19 at 22:40
  • I tried that before but then it gets even weirder because then instead of the links i get . routes.forEach(route => ); as my output – Havok224 Jan 05 '19 at 22:57
  • 1
    Read azium's comment, you have to put brackets around this function – Treycos Jan 05 '19 at 23:03
  • Yeah that's what it was ... can't believe I didn't put those thanks. – Havok224 Jan 05 '19 at 23:07