Double curly braces error with ReactDOM

Question

What's causing this error?

Syntax error: Unexpected token, expected ,
{ Object.keys(form_routes).map( (key,index) => <Route path={key} component={{ form_routes[key] }}></Route> ) }

at {{ form_routes[key] }}

full relevant code:

const form_routes = {
    'start': "Start",
    'part1': "Part1",
    'part2': "Part2",
    'part3': "Part3",
    'part4': "Part4",
    'part5': "Part5",
    'part6': "Part6"
}

ReactDOM.render(
    <Provider store={store}>
      <Router history={hashHistory} render={applyMiddleware(useRelativeLinks())}>
        <Route path="/" component={App}>
            <IndexRedirect to='/search'/>
            <Route path='main' component={MainMenu}/>
            <Route path='search' component={Search}/>
            <Route path='form' component={Form}>
                <IndexRedirect to='start'/>
                { Object.keys(form_routes).map( (key,index) => <Route path={key} component={{ form_routes[key] }}></Route> ) }
            </Route>
        </Route>
      </Router>
    </Provider>,
    root
);

Works if plain:

<Route path='start' component={Start}></Route>
<Route path='part1' component={Part1}></Route>
<Route path='part2' component={Part2}></Route>
<Route path='part3' component={Part3}></Route>
<Route path='part4' component={Part4}></Route>
<Route path='part5' component={Part5}></Route>
<Route path='part6' component={Part6}></Route>

Answer 1

component={...} is supposed to contain an expression. The expression you're giving it is { form_routes[key] } , which is an invalid object initializer. This would trigger the same error:

console.log({ form_routes[key] });

You probably just wanted component={ form_routes[key] } .