CODEWITHSUNDEEP
reactjs
Jesvin Jose
Jesvin Jose

Reputation: 23098

Have a container tag with react?

I want to have composable container I can render like:

<Container><Heading>{heading}<Heading></Container>

Given that Container is

<div class="container something">
  {contents}
</div>

and Heading2 is 

<h2 class="heading something">{heading}</h2>

Is it possible to do this?

I know enough syntax to do container(heading2(heading) or <Container contents={heading_element}> but they dont nest like JSX.

Upvotes: 0

Views: 2572

Answers (2)

Jesvin Jose
Jesvin Jose

Reputation: 23098

Children elements are available to the class by this.props.children. Learned it in a roundabout way. 

var Container = React.createClass({
  render: function() {
    return <div className="container">
      {this.props.children}
    </div>
  }
});

var Heading2 = React.createClass({
  render: function() {
    return <h2>{this.props.children}</h2>
  }
});

var Child2 = React.createClass({
  render: function() {
    return <div>
      <Container><Heading2>This is it.</Heading2></Container>
    </div>
  }
});

Upvotes: 2

Laurens Kling
Laurens Kling

Reputation: 2261

You should use props and you can even prop a component.

var Header = React.createClass({ 
  render: function() {
    return (
       <h2 class="heading something">{this.props.heading}</h2>
    );
  }
});

var Container = React.createClass({ 
  render: function() {
    return (
       <div class="container something">
           {this.props.contents}
       </div>
    );
  }
});


var header = <Header heading="test" />
<Container contents={header} />

Upvotes: 0

Related Questions