CODEWITHSUNDEEP
javascriptreactjs
EugenSunic
EugenSunic

Reputation: 13733

React doesn't render second nested element

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"));

Upvotes: 1

Views: 400

Answers (1)

Jeff Cousins
Jeff Cousins

Reputation: 3501

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.

Upvotes: 4

Related Questions