Iterating in react-router

router.js

/* containers/Main/formProps.js */

export default [{
  path: 'quiz',
  name: 'favorite-car',
  label: 'What is your favorite car?',
  type: 'text',
  placeholder: 'bat mobile'
}, {
  path: 'quiz1',
  name: 'favorite-cat',
  label: 'What is your favorite cat?',
  type: 'text',
  placeholder: 'bengal'
}, {
  path: 'quiz2',
  name: 'user-age',
  label: 'How old are you?',
  type: 'number'
}];

/* containers/Main/FormTemplate.js */
export default (questions) =>
  <form>
    {questions.map((question, i) =>
      <div className={question.name} key={`question-${i}`}>
        <label for="">{question.label}</label>
        <input type={question.type} placeholder={question.placeholder} />
      </div>
    )}
    <button type="submit>Submit</button>
  </form>;
  
/* routes.js */

import { Route, IndexRoute } from 'react-router';
import Index from 'containers/Index';

import Main,{ FormTemplate, formsProps } from 'containers/Main;

export default (
  <Route path="/">
    <IndexRoute component={index}>
    <Route component={Main}>
      {formsProps.map((props, i) =>
        <Route
          key={`route-form-${i}`}
          path={props.path}
          component={simulateExport(FormTemplate, props)} />
      )}
    </Route>
  </Route>
);

// This simulates a wrapped es6 exported component with props
// => () => <Component {...props} />;
function simulateExport(component, props) {
  return () => React.createElement(component, props);
}