Adding Child Elements Dynamically in ReactJS

Question

I have a Container Element and I would like to allow users to select a list of Widgets (Each Widget is different) that a User can choose to add to the container.

I have the following code for WidgetContainer:

export default class WidgetContainer extends React.Component {

  constructor(props){
    super(props);
    console.log('WidgetContainer() : props=['+props+']');
  }

  render() {
    var widgetsTmp  = '';
    if(this.props.data && this.props.data.widgets){
      widgetsTmp = this.props.data.widgets.map(function(widget){
              return (
                  <WidgetItem data={widget} key={widget.id}/>
              );
          });
    }
    return (
      <div className='container'>
        {widgetsTmp}
      </div>
    );
  }
}

And I am setting the props for WidgetContainer as below in an element which contains WidgetContainer

<WidgetContainer data={section}/>

And from my Store I am sending the details of the Widgets using the following JSON Object as initial props.

widgets:
[
  {
    title:'Widget1',
    id:'1'
  },
  {
  title:'Widget2',
  id:'2'
  }
]

I am not sure how I can specify the Widget it self declaratively?

The other option is using the children's property of the parent and add them using non JSX Syntax.

Michelle Tilley · Accepted Answer · 2015-05-23 17:16:49Z

1

If you can get access to the component class, you can assign it to any capitalized variable name and render it normally via JSX.

var CapitalizedVariableName = lookupComponentClass(maybeBySomeString);
return <CapitalizedVariableName props={stuff} />;

So, as a basic example:

import Widget1 from "./widget1";
import Widget2 from "./widget2";

var widgets = {
    'Widget1': Widget1,
    'Widget2': Widget2
};

// ...

if(this.props.data && this.props.data.widgets){
    widgetsTmp = this.props.data.widgets.map(function(widget){
        var WidgetType = widgets[widget.type];
        return (
            <WidgetType data={widget} key={widget.id}/>
        );
    });
}

answered May 23, 2015 at 17:16

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

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

4 Comments

Sateesh K Over a year ago

Hi, Thanks for your quick response. I updated my code and created a plnkr here plnkr.co/edit/j31aIYIkW5Pbda9uZ7fL?p=preview how ever when i return the element it is not getting rendered. Not sure what am doing wrong.

Sateesh K Over a year ago

Another thing is in Plunkr i am not getting any Error even though the Widget1 or Widget2 components are not rendered in WdigetItem Element.

Michelle Tilley Over a year ago

@mars76 The code is quite dense and very hard to follow; I recommend paring it down to a minimal example. There are a few errors throughout the code; here is a version that basically works: plnkr.co/edit/stDBHBw6ozh70j5AFHt6?p=preview Here is a diff containing the changes I made: gist.github.com/BinaryMuse/56a3166b2fa7e2ba5004

Sateesh K Over a year ago

Thanks i am able to resolve it. i had same element getting included in a loop. not sure whether the issue is with that or not.

Collectives™ on Stack Overflow

Adding Child Elements Dynamically in ReactJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related