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!'} />,
} />