1
\$\begingroup\$

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!'} />,
        } />
\$\endgroup\$
3
\$\begingroup\$

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!'}
\$\endgroup\$
  • \$\begingroup\$ Great explanation! You learn something new every day :) Also found this link which might be helpful to the OP. \$\endgroup\$ – yadav_vi Mar 22 '18 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.