React container component

Question

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={
 [
 <MediaObject heading={'today's rates!'} />,
 <MediaObject heading={'some other heading'} />,
 <MediaObject heading={'other other heading'} />
 ] />
 <MySection
 bgColor={'bg-gray'}
 content={
 <MediaObject heading={'today's rates!'} />,
 } />

Answer 1

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">
 <MediaObject heading="today's rates!" />
 <MediaObject heading="some other heading" />
 <MediaObject heading="other other heading" />
 </MySection>
<MySection bgColor="bg-gray">
 <MediaObject heading="today's rates!" />
</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!'}

• yadav_vi: Great explanation! You learn something new every day :) Also found this link which might be helpful to the OP.