React doesn't render second nested element

Question

I'm trying to use react nested elements here, but am I unable to render the third element. The first two react sub-elements work perfectly but the second nested element doesn't render? Why is that so? How should I fix this?

var Nested=React.createClass({
      render: function(){
        return(
           <div className="second">nested div</div>
          )
      }     
  });

  var Component=React.createClass({
      render: function(){
        return(

            <div className={this.props.className}>
            <Nested>
              <Nested/> //this doesn't want to render
            </Nested>
            <Nested/>
            </div>

            );
      }
   });
   ReactDOM.render(
   <div>
     <Component/>
   </div>,
   document.getElementById("app"));

Jeff Cousins · Accepted Answer · 2017-01-20 18:48:28Z

4

If you want a custom component to render nested components or elements, using {this.props.children} in your custom component's render method will allow you to do that.

answered Jan 20, 2017 at 18:48

Jeff Cousins

3,5011 gold badge11 silver badges6 bronze badges

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

Collectives™ on Stack Overflow

React doesn't render second nested element

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