title: ReactJS Component with "sub-components"
body: <p>I am quite new to ReactJS and started to make some components like this: </p>
  
  <pre><code>class Row extends React.Component {
      render() {
          return (
              &lt;div className={"row w-100 ml-0 mr-0 " + this.props.className}&gt;
                  {this.props.children}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>What I want to achieve now is that this component has "sub-components" (I don't know the right word for it) like  or something similiar.</p>
  
  <p>Do I have to create another component for that or is it possible to implement that in one component? </p>
  
  <p>Edit: </p>
  
  <p>I have this component which already has childs inside:</p>
  
  <pre><code>&lt;div className="custom-card"&gt;
      &lt;Card&gt;
          &lt;CardHeader onClick={this.toggle} className={"card-header " + ((!this.props.readOnly &amp;&amp; this.props.headerCtrl) &amp;&amp; "pt-0")}&gt;
              &lt;CardTitle className="card-title d-flex justify-content-between"&gt;
                  &lt;p&gt;{this.props.title}&lt;/p&gt;
              &lt;/CardTitle&gt;
          &lt;/CardHeader&gt;
          &lt;Collapse isOpen={this.state.collapse}&gt;
              &lt;CardBody className="card-body"&gt;
                  {this.props.children}
              &lt;/CardBody&gt;
          &lt;/Collapse&gt;
      &lt;/Card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I also want that the user can specify which component should be displayed in the cardheader. So that there can not only be a <code>&lt;p&gt;</code> but also a <code>&lt;input&gt;</code> and so on.</p>