React - How can I pickup component which one I want in to another module

Question

See the below code. It is a Tile component with image, heading, Paragraph, and a button. My requirement is I want to use this code for creating multiple type tiles (modules). Eg without image, Or without Paragraph and button.

for Eg how can I create another tile (module) without Paragraph and button. (not create same below code without paragraph and button)

import React from 'react';
import Image from './../../../../src/components/atoms/image/image';
import Heading from './../../../../src/components/atoms/heading/heading';
import LinkIcon from './../../../../src/components/atoms/link-icon/link-icon';
import Paragraph from './../../../../src/components/atoms/paragraph/paragraph';

function GridTile(props) {
return (
 <div className={`grid-tile ${props.class}`}>
   <a href="#" className="grid-tile__link">
    <div className="grid-tile__image">
      <Image src="" />
    </div>
    <div className="grid-tile__content">
      <Heading
        tag="3"
        class=""
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
      />
      <Paragraph
        tag="p"
        text="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat. "
      />
      <LinkIcon text="Read More" />
    </div>
    </a>
   </div>
 );
}
export default GridTile;

Answer 1

you could decide based on your props.

const GridTile(props) {

...

{props.showImage && <Image...}
{props.showHeading && <Heading...}

then, you call the GridTile in the following way:

<GridTile showImage={true} showHeading={true} />

It will depend on your use case if you want to have defaultProps, all in false and then true in special case. But basically, base what you show depending on the props you pass or in the default props declared in the component. (or better, default values.)

Answer 2

One way to do it is via using props, so the parent component decides what to see.

Your code will look something like this:

import Image from './../../../../src/components/atoms/image/image';
import Heading from './../../../../src/components/atoms/heading/heading';
import LinkIcon from './../../../../src/components/atoms/link-icon/link-icon';
import Paragraph from './../../../../src/components/atoms/paragraph/paragraph';

function GridTile({showImage=true, showHeading=true, showParagraph=true, ...props}) {
return (
 <div className={`grid-tile ${props.class}`}>
   <a href="#" className="grid-tile__link">
    div className="grid-tile__image">
      {showImage &&<<Image src="" />}
    </div>
    <div className="grid-tile__content">
     {showHeading && <Heading
        tag="3"
        class=""
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
      />}
      {showParagraph &&<Paragraph
        tag="p"
        text="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat. "
      />}
      <LinkIcon text="Read More" />
    </div>
    </a>
   </div>
 );
}
export default GridTile;

I have used default props, so you don't have to set all of them every time.

Then you can call your component like this:

<GridTile showParagraph={false} />