React js - Listing.js is imported into a template file that passes content through key/value attributes and exports the key/value to the ListingTemplate.js file.

Listing.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import './Listing.scss';
import Layout from '../../Layout';
import ListingTemplate from './ListingTemplate';

// Class App component
class Listings extends Component {
    constructor( props ) {
        super( props );
    }

    render() {
        return(
         <Layout>
           <ListingTemplate card__title="Card Title #1" card__text="" card__button="" card__image="" />
           <ListingTemplate card__title="Card Title #2" card__text="Some quick example text to build on the card title and make up the bulk of the card's content." card__button="button-text" card__image="testing.jpg" />
           <ListingTemplate card__title="Card Title #3" card__text="" card__button="" card__image="" />
          </Layout>
        )
    }
}
export default Listings;

ListingTemplate.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';

const ListingTemplate= ({card__title, card__text, card__button, card__image}) => (
          <div className="card mr-md-3" style={{ width: `18rem`}}>
             { card__image!=null ? (
                 <img className="card-img-top" src={card__image} alt="Card image cap"/>
               ):(
                  <p>NO IMAGE</p>
               )
           }
             <div className="card-body">
                 <h5 className="card-title">{card__title}</h5>
                 <p className="card-text">{card__text}</p>
                 <a href="#" className="btn btn-primary">{card__button}</a>
             </div>
           </div>
        )
export default ListingTemplate;