Can't seem to loop through <Location>
components using .map
as I get the following error as it's being passed as a string:
Error: Invariant Violation: Route handler should be a component or a function but got: MainPage
Array in question and the component:
[{
'path': '/',
'handler': 'MainPage'
},{
'path': '/users/:userName',
'handler': 'UserPage'
}]
var App = React.createClass({
render: function() {
var createRoute = function(item) {
return <Location path={item.path} handler={item.handler} />
}
return (
<Locations path={this.props.path}>
{this.props.paths.map(createRoute)}
<NotFound handler={NotFoundPage} />
</Locations>
)
}
})
Any idea how? Spent ages trying associative arrays, eval() and all kinds of nonsense. Not sure if I'm missing something really obvious/just writing really bad code.
Just a bit annoying as I wrote a load of code for parsing routes/handlers from a JSON file and mapping them to express functions (to keep code and function names the same on client and server) and didn't realise it wouldn't work until I started trying to map them.
The following logs out the function reference but breaks and returns: