How to render an array of JSX elements (React components)

Question

I'm trying to render an array of named react components, say <Foo />, <Bar />, and <Baz />,for example.

const rendered = [];
const getItems = this.props.itemslist.map((item, key) => {
const TYPE = item.type;
rendered.push(<TYPE data-attributes={attributes} key={key} />);
});
return (
  <Grid>
    <Row>
    {rendered}
    </Row>
  </Grid>
);

I can iterate over my array and see in the console the array of elements, but they are rendered as empty html elements "<foo></foo><bar></bar><baz></baz>", and not the actual components. Why is this happening and, more importantly, how can I get the COMPONENTS to render?

@brainstormtrooper Dont store string in item.type. Instead store component itself. — Prakash Sharma
– Prakash Sharma, Commented Sep 26, 2017 at 9:59
itemslist: [ { type: 'Foo', }, { type: 'Bar', }, { type: 'Baz', }, ] — brainstormtrooper
– brainstormtrooper, Commented Sep 26, 2017 at 9:59
@Prakashsharma, How can I do that? I have a config file in javascript... I need to be able to iterate and configure my components... — brainstormtrooper
– brainstormtrooper, Commented Sep 26, 2017 at 10:02

Prakash Sharma · Accepted Answer · 2017-09-26 10:35:50Z

4

You should use component instead of string in item.type like this

import Foo from './Foo';
import Bar from './Bar';

[ { type: Foo, }, { type: Bar, }, { type: Baz}]

UPDATE:

If you do not have component reference in advance then use a mapping object which convert your string to component reference like this

import Foo from './Foo';
import Bar from './Bar';

const mapper = {
  Foo: Foo,
  Bar: Bar,
}

// Then use it like this

const getItems = this.props.itemslist.map((item, key) => {
    const Type = mapper[item.type];
    rendered.push(<Type data-attributes={attributes} key={key} />);
});

edited Sep 26, 2017 at 10:35

answered Sep 26, 2017 at 10:02

Prakash Sharma

16.7k6 gold badges34 silver badges38 bronze badges

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

3 Comments

Prakash Sharma Over a year ago

@brainstormtrooper I am not sure i got you. My point is that from string, you cannot render component. If you do not have component reference then just create a map object which map your string to component.

Prakash Sharma Over a year ago

@brainstormtrooper See this github.com/facebook/react/issues/3365

Prakash Sharma Over a year ago

@brainstormtrooper Also this github.com/facebook/react/issues/3365#issuecomment-218409353

Andrew · Accepted Answer · 2017-09-26 10:35:04Z

0

The first mistake is see if an incorrect use of .map. Remember that .map traverses each array element and changes them. Right now, you are using it as if it were .forEach.

Your code should look more like this:

const getItems = this.props.itemslist.map((item, key) => {
  const TYPE = item.type;
  return <TYPE data-attributes={attributes} key={key} />
});

edited Sep 26, 2017 at 10:35

answered Sep 26, 2017 at 10:25

Andrew

7,5855 gold badges28 silver badges35 bronze badges

Comments

Shubham Khatri · Accepted Answer · 2017-09-26 10:45:22Z

0

You can use React.createElement for creating the React element with a dynamic name. Also make sure to import those components.

const rendered = [];
const getItems = this.props.itemslist.map((item, key) => {
    const component = React.createElement(item.type, {data-attributes: attributes, key: key}, null);
    rendered.push(component);
});
return (
  <Grid>
    <Row>
    {rendered}
    </Row>
  </Grid>
);

answered Sep 26, 2017 at 10:45

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

2 Comments

brainstormtrooper Over a year ago

Thank you. I tried that, but I get the same result :-(

Shubham Khatri Over a year ago

Are you string beginning with upperCase character, else it wont be treated as a react component

Collectives™ on Stack Overflow

How to render an array of JSX elements (React components)

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related