ReactJs - nested list component inside list component

Question

Hello i want to nest a list component inside a list component. The first list is an option group list, each of its items has a list of options. I think the problem comes from the nested IndicatorRow. I could'nt find a same example around.

var IndicatorRow = React.createClass({
 render: function() {

  var indicators = [];

  for (var key in this.props.indicatorsOfGroup) {
      indicators.push( <option value={key} > {this.props.indicatorsOfGroup[key]}</option> );
  }

  return {indicators} ;
 }
});

var IndicatorGroup = React.createClass({
render : function(){

  var indicatorsGroup = [];
  for (var key in this.props.indicatorsGroups) {

      var indicatorsOfGroup = this.props.indicatorsGroups[key].indicators;

      indicatorsGroup.push( 
         <optgroup label={key}> 
             <IndicatorRow indicatorsOfGroup={indicatorsOfGroup}/>
         </optgroup> );

  }

    return ( <select> 
                {indicatorsGroup} 
            </select> );
}
});

ReactDOM.render(
    <form>
        <fieldset className="form-group">
            <IndicatorGroup indicatorsGroups={indicatorsSelected}/>
        </fieldset>
    </form>
 ,
 document.getElementById('indicators')
);

My data is structured as below

var indicatorsSelected = {
"Economy & Growth": {
    "indicators": {
        "id1": "Indicator 1",
        "id2": "Indicator 2"
    }
},
"Energy & Mining": {
    "indicators": {
        "id1": "Indicator 1",
        "id1": "Indicator 2"
    }
},
"Environment": {
    "indicators": {
        "id1": "Indicator 1",
        "id2": "Indicator 2"
    }
},
{...}
};

I would appreciate any help

Blair Anderson · Accepted Answer · 2016-04-21 00:19:53Z

2 problems:

You cannot return an Array from render
Your Array children each need a key attribute

something like:

var IndicatorRow = React.createClass({
  render: function() {
    var indicators = [];

    for (var key in this.props.indicatorsOfGroup) {
      indicators.push( <option key={key} value={key} > {this.props.indicatorsOfGroup[key]}</option> );
    }

    return (<optgroup  label={key}>
      {indicators}
    </optgroup>);
  }
});

var IndicatorGroup = React.createClass({
  render: function(){
    var indicatorsGroup = [];
    for (var key in this.props.indicatorsGroups) {
      var indicatorsOfGroup = this.props.indicatorsGroups[key].indicators;

      indicatorsGroup.push( 
        <IndicatorRow key={key} indicatorsOfGroup={indicatorsOfGroup}/>
      );

    }
    return (<form>
      <fieldset className="form-group">
        <select> 
          {indicatorsGroup} 
        </select>             
      </fieldset>
    </form>);
  }

});

ReactDOM.render(
<IndicatorGroup indicatorsGroups={indicatorsSelected}/>,
 document.getElementById('indicators')
);

Collectives™ on Stack Overflow

ReactJs - nested list component inside list component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related