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.

You can't apply key to component as it will taken in as an attribute to the component. — codejockie
– codejockie, Commented Jan 6, 2018 at 19:41

Simon Boudrias · Accepted Answer · 2018-01-06 19:45:07Z

21

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' });

answered Jan 6, 2018 at 19:45

Simon Boudrias

44.9k16 gold badges109 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zbr · Accepted Answer · 2021-07-21 09:57:54Z

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

codejockie · Accepted Answer · 2018-11-16 00:10:47Z

10

Following up with my comment, you should be doing this instead:

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

With React 16, you can use React.Fragment:

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

edited Nov 16, 2018 at 0:10

answered Jan 6, 2018 at 19:50

codejockie

11.1k5 gold badges52 silver badges58 bronze badges

1 Comment

Craig Myles Over a year ago

Rather than using a span, you could also use React.Fragment to prevent having to add a parent container: <React.Fragment key={index}>{component}</React.Fragment>

codejockie · Accepted Answer · 2021-09-03 18:57:39Z

4

All of these answers are almost right. Just remove the <../> from your exports:

export default [
    ComponentOne,
    ComponentTwo,
]

And in the other file use .map():

export default class Dashboard extends React.Component {
    render = () => (
        <div className="tile is-parent">
            {components.map((Component, key) => (<Component key={key} />))}
        </div>
    )
}

Also note that if you wanted to use Fragment like others suggested you can just write <>...</> instead.

edited Sep 3, 2021 at 18:57

codejockie

11.1k5 gold badges52 silver badges58 bronze badges

answered Nov 16, 2018 at 0:33

Dustin

3762 silver badges5 bronze badges

Comments

Forth · Accepted Answer · 2021-08-13 10:39:53Z

2

You can also do like that :

{components.map(component => component)}

It mappes your components to display them one by one.

answered Aug 13, 2021 at 10:39

Forth

1992 silver badges7 bronze badges

1 Comment

OneCricketeer Over a year ago

Isn't this the same as {components}?

The Reason · Accepted Answer · 2018-01-06 19:47:03Z

1

It's pretty easy, just wrap your component into div and pass key there as i did below:

const Example = ({components}) => (
  <div>
    {components.map((component, i) => <div key={i}>{component}</div>)}    
  </div>
)

Worked example

answered Jan 6, 2018 at 19:47

The Reason

8,0135 gold badges27 silver badges43 bronze badges

2 Comments

jaxkewl Over a year ago

Looking at your worked example. How could I make this work if my render section looked like this. where

var items = [Foo, Baz]; let items: any[] = items.map(item => { 			//alert(tab); 			return ({item}); 		});ReactDOM.render(   <Example components={items}/>,   document.getElementById('container') );

jaxkewl Over a year ago

sorry for the messy syntax, i made a fiddle that does not work. jsfiddle.net/208y7mwg

Prakash Sharma · Accepted Answer · 2018-01-06 19:49:35Z

1

Actually you are exporting array of elements from the file. One way is to export array of component and render them like

import React from 'react';
export default [
    ComponentOne
    ComponentTwo
];
// Then following will work
{components.map((Component, key) => (
    // Remember to make first letter capital (in this case "c")
    <Component key={key}/>
}

The other way is to wrap the component in div like this

import React from 'react';
export default [
    <ComponentOne/>
    <ComponentTwo/>
];
// Then wrap in div
{components.map((component, key) => (
    <div key={key}>
      {component}
    </div>
}

edited Jan 6, 2018 at 19:49

answered Jan 6, 2018 at 19:45

Prakash Sharma

16.7k6 gold badges35 silver badges38 bronze badges

3 Comments

The Reason Over a year ago

the second way will not work, bc you cannot return something like this < <Component/>/>

Prakash Sharma Over a year ago

@TheReason And the reason?

The Reason Over a year ago

just updated a comment, you have to remove < & /> from elements of array component. Does it make sense?

Anjan Biswas · Accepted Answer · 2022-05-01 18:03:29Z

1

Just to expand a bit more to the accepted answer. If you have an array of elements elementArray and you would like to pass props to it like callbacks etc. you would do something like this-

To create the component array somewhere-

elementArray.push(<MyComponent/>);

And then in render-

<div>
{
    elementArray.map((element,i) => {
       React.cloneElement(element, { key: i,  onClick: () => myOnclick(i)})
    })
}
</div>

The second argument to React.cloneElement is an object of all the props that you would pass to the component at the time of render.

answered May 1, 2022 at 18:03

Anjan Biswas

8,0126 gold badges51 silver badges78 bronze badges

2 Comments

OneCricketeer Over a year ago

myOnclick has no access to the component state this way, right?

Anjan Biswas Over a year ago

Well, technically myOnclick should be a callback method in the current (parent) component. So in that case an action within element that fires onClick would fire myOnclick on the parent.

Muho · Accepted Answer · 2020-11-08 04:35:27Z

0

if you are using react version above 16 you can create your list of component like that:

import React from 'react';

export const componentList = [ ComponentOne, ComponentTwo ];

and render them anywhere like that:

import React from 'react';

function SomeComponent() {
  return (
    <div>
      {componentList.map((component, index) => (
        <div key={index}> {component && component.render()}</div>
      ))}
    </div>
  );
}

answered Nov 8, 2020 at 4:35

Muho

3,5762 gold badges26 silver badges36 bronze badges

1 Comment

OneCricketeer Over a year ago

Unclear why this is v16+ specific. Seems like should work, based on similar answers 2 years before this one

congdc · Accepted Answer · 2021-05-15 10:12:59Z

0

If I put components inside an array, I usually do it like this:

const COMPONENTS = [
  <Foo />,
  <Bar />
]

[0, 1].map(item => {
      return (
        <React.Fragment key={item}>
          {COMPONENTS[item]}
        </React.Fragment>
      )
})

answered May 15, 2021 at 10:12

congdc

633 bronze badges

1 Comment

OneCricketeer Over a year ago

map() function already has an index, so you don't need [0, 1]. Just do COMPONENTS.map((c, item) => ) . stackoverflow.com/a/64734864/2308683

Collectives™ on Stack Overflow

React render array of components

10 Answers 10

Comments

Comments

1 Comment

Comments

1 Comment

2 Comments

3 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Comments

Comments

1 Comment

Comments

1 Comment

2 Comments

3 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related