reactjs - React - Mapping out Components returning error -

there app build many pages, figured best way put pages name , path separate file , mapping out each 1 oppose having long list of components in render. problem when try use map function, returns error saying uncaught syntaxerror: unexpected token < in json @ position 1

routes.js

import react "react"; import { withrouter, switch, browserrouter, route, redirect, link } "react-router-dom";  import login "../ui/authentication/login"; import signup "../ui/authentication/signup"; import home "../ui/home"; import { subjectroutes } "../ui/subjectroutes/subjectroutes"; import math "../ui/subjectroutes/routes/math" import science "../ui/subjectroutes/routes/science" import notfound "../ui/notfound";  export default class routes extends react.component{   rendersubjectroutes(subjects){     console.log(subjectroutes)     return subjects.map((subject) => {       return <{subject.name} path={subject.path} />     })   }   render(){     return (       <div>         <browserrouter>           <switch>             <login path="/login" />             <signup path="/signup" />             <home path="/home"/>             {this.rendersubjectroutes(subjectroutes)}             <notfound />           </switch>         </browserrouter>       </div>     )   } } 

subjectroutes.js

export const subjectroutes = [{   name: "science",   path: "/science" },{   name:"math",   path:"/math" }] 

i have tried returning <route component={subject.name} path={subject.path}> returns warning warning: failed prop type: invalid prop component of type string supplied route, expected function. know possible solutions map out each route without having each 1 individually? or there other better way missing?

<route component={subject.name} path={subject.path}> 

doesn't work because subject.name string (as pointed out in error). need route object point actual components rather name in order make work.

subjectroutes.js

import math "../ui/subjectroutes/routes/math" import science "../ui/subjectroutes/routes/science"  export const subjectroutes = [{   name: science,   path: "/science" },{   name:math,   path:"/math" }] 

check out route configs of react router can map data components.