ReactJS : Bootstrap Thumbnail Matrix / Grid Gallery

Demo code: Download

[Please refer to: http://mohiplanet.blogspot.com/2015/10/react-bootstrap-listgrid-toggle.html

for running :]

<script type="text/babel">

'use strict';

var ThumbnailMatrixItem= React.createClass({
render: function() {
return (
 <div className="col-lg-3 col-md-4 col-xs-6">
          <a href="#" className="d-block mb-4 h-100">
            <img className="img-fluid img-thumbnail" src={this.props.imgUrl} 

alt="" />
          </a>
        </div>
 );
 }
});

var ThumbnailMatrix= React.createClass({
render: function() {
var productNodes= this.props.items.map(function (product) {
 return (
  <ThumbnailMatrixItem name={product.name} description={

product.description} price={product.price} imgUrl={product.imgUrl}>

</ThumbnailMatrixItem>
        );
 });

return (
 <div className="container"> 
       <h1 className="my-4 text-center text-lg-left">{this.props.title}</h1>

        <div className="row text-center text-lg-left">
 {productNodes}
 </div>
 </div>
       );
}
});

ReactDOM.render(<ThumbnailMatrix title="Bootstrap Thumbnail Gallery" items={

productData}/>, document.getElementById('thumbnailGridDemo'));

//product data

var productData= [
{name: "Priduct 1", description: "product1 description goes here",imgUrl:
 "img/400x300.png", price: "$150"},
{name: "Product 2", description: "product2 description goes here",imgUrl:
 "img/400x300.png",price: "$50"},
{name: "Product 3", description: "product3 description goes here",imgUrl:
 "img/400x300.png",price: "$30"},
{name: "Priduct 41", description: "product1 description goes here",imgUrl:
 "img/400x300.png",price: "$150"},
{name: "Product 52", description: "product2 description goes here",imgUrl:
 "img/400x300.png",price: "$50"},
{name: "Product 63", description: "product3 description goes here",imgUrl:


 "img/400x300.png",price: "$30"},
{name: "Priduct 71", description: "product1 description goes here",imgUrl: 
"img/400x300.png",price: "$150"},
{name: "Product 82", description: "product2 description goes here",imgUrl: 
"img/400x300.png",price: "$50"},
{name: "Product 93", description: "product3 description goes here",imgUrl: 
"img/400x300.png",price: "$30"},
{name: "Product 95", description: "product3 description goes here",imgUrl:
 "img/400x300.png",price: "$30"},
{name: "Product 96", description: "product3 description goes here",imgUrl: 
"img/400x300.png",price: "$30"},
{name: "Product 99", description: "product3 description goes here",imgUrl: 
"img/400x300.png",price: "$30"},
 ];

    </script>

Dependencies:

    <script src="libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="libs/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="libs/react/0.14.2/react.js"></script>
    <script src="libs/react/0.14.2/react-dom.js"></script>
    <script src="libs/babel/babel-core/5.8.23/browser.min.js"></script>