Using React, what is the proper way to render an element with multiple nested elements?

Question

Using React, how do I render a <div> with multiple nested <div>'s inside them? See code below.

var SubTrait = React.createClass({

  render: function() {
    var subTraits = this.props.data;
    return (
    <div className = "subTraitContainer">
      <div>
        { subTraits.forEach(function(subTrait) {
          return (
            <div>
              <h4>{ subTrait.name }</h4>,
              Sub-Sub-Traits
              <SubSubTrait data={ subTrait.children } />
            </div>
          );
        })}
      </div>
    </div>
    );
  }
});

The end result I get with this code is:

-edit- Would the proper way to do this be to create my nodes first using .forEach, then passing the created nodes to the render function's return? (I'm looking at the React Tutorial at React Docs. Would my original solution be possible, or is the only way to pre-create the nodes before returning them?

Chris Gaudreau · Accepted Answer · 2015-11-12 15:41:10Z

4

You need to use map instead of forEach. forEach returns nothing, so the result is:

<div class="subTraitContainer">
  <div></div>
<div>

map returns an array. It maps each element in the given array to something new. For example, you could map an array of Users to their usernames. If you use map instead of forEach, you will get an array of <div>s, which should do what you expected.

answered Nov 12, 2015 at 15:41

Chris Gaudreau

2,2961 gold badge17 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Using React, what is the proper way to render an element with multiple nested elements?

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