Chris Chris - 3 months ago 20
React JSX Question

Is it possible to loop through an array to dynamically generate react components?

Not sure the title is totally clear (wasn't sure how to phrase it) so let me explain.

I'd like to try and store a list of component names in an array, then loop through using

map
(or suitable equivalent) in order to display each array value as a JSX component.

So something along the lines of this (appreciate this code doesn't work, just trying to show what I'm hoping to achieve):

render(){
let links = ['DashboardLink', 'CoursesLink', 'AssignmentsLink'];
return (
<div>{
links.map((Link) => {
return <Link key={Link} />
}
}</div>
)
}


Ideally the result would be:

<div>
<DashboardLink key='DashboardLink' />
<CoursesLink key='CoursesLink' />
<AssignmentLink key='AssignmentLink' />
</div>


and each component would then render within the div.

I'm very new to React and ES6 so apologies for any glaring mistakes.

Thanks!

Answer

You can use a helper function then:

 render(){
   var links = ['DashboardLink', 'CoursesLink', 'AssignmentsLink'];
   var findComponent: function (name){
     switch (name){
         case 'DashboardLink':
             return (<DashboardLink />);
         case 'CoursesLink':
             return (<CoursesLink />);
         case 'AssignmentsLink':
             return (<AssignmentsLink />);
         default:
             return null; //You might want to return something else here//
     }
   }; 
   return (
     <div>
       links.map((Link) => {
         return findComponent(Link);
       }
     </div>
  );
}

You can place this function at other places too...

Use React.createElement method to create custom components: First argument is name of tag, second is a object with properties, and you can add children as third argument.

render(){
   var links = ['DashboardLink', 'CoursesLink', 'AssignmentsLink'];
   return (
     <div>
       links.map((Link) => {
         return React.createElement(Link, {key: Link});
       }
     </div>
  );
}

Refer: https://facebook.github.io/react/docs/glossary.html