CODEWITHSUNDEEP
reactjs
vuvu
vuvu

Reputation: 5328

Create a react-component as wrapper for content

I want to create a column-component, I can reuse. The column-component is then used as wrap. How can I achieve that. Currently the inner content of the column is not displayed.

React.js

 const Col = React.createClass({

  render() {

    return (
        <div className='col'>

        </div>
    );
  }
 });

Usage inside other Module:

import Col from ....
...
 return( 

   <Col> 
      <div>Here goes the content ...</div>
   </Col>
)

Upvotes: 0

Views: 111

Answers (2)

Khalid Azam
Khalid Azam

Reputation: 1643

To use the component inside the other component  you need to wrap around the div  of parent component.


React.js

 const Col = React.createClass({

  render() {

    return (
        <div className='col'>

        </div>
    );
  }
 });
Usage inside other Module:

import Col from ....
...
 return( 
   <div>
     <Col />
    </div>
)

Upvotes: 0

Martin Dawson
Martin Dawson

Reputation: 7656

The html gets passed as children through props.

const Col = React.createClass({

  render() {

    return (
        <div className='col'>
           {this.props.children}
        </div>
    );
  }
 });

Upvotes: 2

Related Questions