# React container component

This is my first reactJS project and I am trying to build a page out of my components. I thought it would be best to create a section component and then put appropriate components inside of it.

I'm not sure if this is the correct way... it works but looks a bit weird when there is more than one component. Also VS Code yells at me if I put an apostrophe in a heading.

### MySection.js

        <section className={this.props.bgColor + " USBSection">
<div className="container">
{this.props.content}
</div>
</section>


### Homepage.js

      <MySection
bgColor={'bg-gray'}
content={
[
] />

<MySection
bgColor={'bg-gray'}
content={
} />


You don't have to put content as a prop, you can do this:

<section className={this.props.bgColor + " USBSection">
<div className="container">{this.props.children}</div>
</section>


and then you can use your component as:

 <MySection bgColor="bg-gray">
</MySection>

<MySection bgColor="bg-gray">
</MySection>


So whatever is written inside the "body" of the component, is passed on as this.props.children.

Regarding VSCode yelling at you about the apostrophe is that you were closing the apostrophe before the string end:

heading={'today's rates!'}


If you use a single quote inside a string, use double quotes:

heading={"today's rates!"}


or, you can escape the quote:

heading={'today\'s rates!'}

• Great explanation! You learn something new every day :) Also found this link which might be helpful to the OP. Mar 22, 2018 at 10:13