React render array of components

Question

Quick question. Anyone know how to render an array of components? Trying to make it easier for a developer to alter a particular component. (It's like a dashboard).

Component list file

import React from 'react'; export default [     <ComponentOne/>     <ComponentTwo/> ]; 

Dashboard Component

import React from 'react';  import components from './../../components';  export default class Dashboard extends React.Component  {     render = () => {         //Want to render the array of components here.         return (             <div className="tile is-parent">                 {components}             </div>         );     }; } 

The issue is I have an array of components that I need to add a key to. However! I can't seem to add a key to the component as well, not sure how to explain it really so here's the code I've tried:

{components.map((component, key) => (     <component key={key}/> } 

If I do the above I get no 'you must apply a key' errors however nothing renders? And I'm guessing it's because 'component' doesn't exist or something weird along those lines.

I've also tried component.key = key; but it doesn't let me do that on this type of Object apparently?

My fallback I suppose is to return a shorthand function instead of an array but I like the array for some reason? Seems simpler for juniors.

Answer 1

Have you consider using the new React Fragments? (in v16)

This would be the simplest solution as it would by pass the whole array/key issue.

If you need to pass key, then I'd suggest to simply require the components to have the keys. This is how React works, so I wouldn't suggest you to hide this behavior behind an interface that might not be predictable.

If you really need to do this, then you can use React.cloneElement to clone the element and inject new properties:

React.cloneElement(element, { key: 'foo' }); 

Answer 2

If you’re always going to want to render all the components in your components file then you’re probably better off wrapping them in a React.Fragments tag.

Best practise is just to export this as a simple function that returns the components rather than as a constant.

So...

const Components = props => {   return (     <React.Fragment>        <ComponentOne/>       <ComponentTwo/>      </React.Fragment>   ) }  export default Components 

That allows you to put multiple components next to each other without a DOM element containing them.

You should then just be able to render that by using it as a normal component and it’ll render all of them, so just import it then...

<Components /> 

Otherwise, if you want to treat them like an array, you have a function for free on the React object you’ve imported...

React.Children.toArray(arrayOfComponents) 

You pass it an array of components (like in your original question) and it allows you to sort and slice it if you need to then you should be able to just drop it in the return of your render function