Iterating through arrays in react

Question

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.

Answer 1

尝试：

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