score:3

Accepted answer

you can solve this with this.props.children like this

class registrationcodeentry extends component {

  render() {
    return (
      <registrationcontainer>
          // render it as children
          <registrationentryview someprop="blah" />
      </registrationcontainer>
    );
  }
}

then in your container

class registrationcontainer extends component {

  render() {

  const maincontent = this.props.maincontent;

  return (
    <row>
      <col offset="lg-3" lg={6}>
         // render the passed children
        {this.props.children}
      </col>
    </row>
  );
 }
}

score:2

your approach is correct. you just went wrong here:

<row>
  <col offset="lg-3" lg={6}>
    <maincontent />
  </col>
</row>

instead do this:

<row>
  <col offset="lg-3" lg={6}>
    { maincontent }
  </col>
</row>

i personally think, this approach is better than using children.

when you did this - const registrationview = <registrationentryview someprop="blah" /> ; the component was already rendered and converted to appropriate format. hence you cannot re-render it with <maincontent />. so using {} is correct in this case.

good luck!


Related Query

More Query from same tag