Как отображать товары в модальном теле

Я обнаружил код, который пытался отображать продукты в модальном теле, но не отображал. когда я нажимаю на изображение, оно отображается в консоли, но не понимаю, как отображать продукты в модальном теле. Для отображения в модальном режиме я использовал response-bootstrap. модальное всплывающее окно отображается, когда я нажимаю на изображение, и оно отображает верхний и нижний колонтитулы. Но в модальном теле я хочу отобразить сведения о продукте, на которые я нажал. может кто-нибудь помочь ..

   import React, { Component } from "react";
   import { Grid, Row, Col, Image, Button, Modal } from "react-bootstrap";
   import AddToCartView from "./AddToCartView";
   // import ProductView from './ProductView';

   class ProductList extends Component {
   constructor(props){
   super(props);
   this.state = {
   show : false
  }
 }

  handleShow = (item) => { 
  this.getProductDetails(item);
  this.setState({
  show : true
  })
 }

handleClose = () => {
 this.setState({
 show : false
 })
}

getProductDetails = (prod) => {
//  console.info(id,'clicked');
console.info(prod);
console.info(prod.title);
console.info(prod.id);
console.info(prod.price);

// let click = document.getElementsByTagName(Image.id);
// console.info(click);

//  const { viewProducts } = this.props
//  console.info(viewProducts);

//  viewProducts.map((prod,id) => {
//    console.info(prod.ptype);
//  })

}
// console.info(viewProducts,'viewProducts');
render(){
const { viewProducts } = this.props;
return (
<div className = "list-container">
  <div className = "mobile-list">
    <h3> Showing { viewProducts.length } mobiles </h3>
  </div>
  <Grid>
    <Row>
      {viewProducts.map((item, key) => (
        <Col xs = {8} md = {4} lg = {4}  key = {item.id}>
          <figure>
            <Image onClick = {() => this.handleShow(item) } src = {item.image} 
     thumbnail />
            <figcaption>{item.title}</figcaption>
            <figcaption>
              <label>Rs. </label>
              {item.price}
            </figcaption>
          </figure>
          <Button bsStyle = "primary"  onClick = {this.props.onChange}>
            <i className = "fa fa-shopping-cart" />
            Add
          </Button>
          <hr />
        </Col>
      ))}
    </Row>
  </Grid>
 <Modal show = {this.state.show} onHide = {() => this.handleClose()}>
      <Modal.Header closeButton>
        <Modal.Title>Product Details</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    {/* <ProductView  displayProductView= { (item) => 
  this.props.displayProductDetails(item) }/> */}

  </Modal.Body>
  <Modal.Footer>
        <Button onClick = {() => this.handleClose()}>Close</Button>
  </Modal.Footer>
</Modal>
</div>
 );
 };
}
export default ProductList;