Render large number of components from a wrapper array allComponents

Question

I found myself in a situation where the number of components start to get annoying. So I put them in a wrapper file:

import CreateDatabaseTask from './tasks/CreateDatabaseTask'
import CreateMigrationsTask from './tasks/CreateMigrationsTask'
...

export const allTasks = [
    CreateDatabaseTask,
    CreateMigrationsTask
    ...
]

Next, in my tasklist I do

import {allTasks} from './tasks/allTasks'

But in the render() method I am not sure how to populate a div from the allTasks array?

I have tried to map the array into Components but cant figure out how to set the component name implicitly.

score 1 · Accepted Answer · answered Feb 13 '18 at 11:11

Just map the array.

function one() {
  return <p>One</p>
}
function two() {
  return <p>Two</p>
}

const array = [one, two]

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
       {
         array.map(Number=><Number/>)
       }
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Remember to use argument starting with Capital letter as React only recognises components with this approach. https://stackoverflow.com/a/30373505/4374566

Thanks, the capital letter got me! – ajthinking Feb 13 '18 at 11:29 — ajthinking, Feb 13 '18 at 11:29

Render large number of components from a wrapper array allComponents

1 Answers1