Modal - React-Bootstrap

import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios';
import { ClipLoader } from 'react-spinners';
import { Modal, Card,Button  } from 'react-bootstrap';
import Image from 'react-image-resizer';


class Recomendet extends Component {
    constructor(props) {
        super(props);

        this.apiURL = 'http://xyz.info/projects/api/products/';
        this.ProductDetailsURL = 'http://xyz.info/projects/api/product/';

        this.state = {
            products:[],
            isOpen:false,
            singleproduct:[],
            imageurl:'',
            disabled: false,
            loading: false,
            showcontent: false
        }

        this.selectModal = this.selectModal.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.handleShow = this.handleShow.bind(this);
    }



    selectModal(event) {
        let productID= event.currentTarget.dataset.product;
        this.setState({isOpen: true});
        this.setState({loading: true});
        this.setState({showcontent: false});

        axios.get(this.ProductDetailsURL + productID).then(response => {
            this.setState({singleproduct: response.data.data });
            this.setState({showcontent: true});
            const imageurl =this.state.singleproduct.image[0].image_url;
            this.setState({ imageurl: imageurl});
            this.setState({loading: false});
        })
            .catch(function (error) {
                console.log(error);
            })

    }

    handleClose() {
        this.setState({ isOpen: false });
    }

    handleShow() {
        this.setState({ isOpen: true });
    }

    render() {
        if(this.state.products.length===0){
            return( 


)
        }
        else

       

 return (
            <section className="topdeal">
                <div className="container">

                    <div className="special_inner">
                        <div className="row">
                            <div className="col-md-6">
                                <h4 className="topdeal"> Recommended for You</h4>
                            </div>
                         
                        </div>
                    </div>


                    <div className="row mt-3">

                        {this.state.products.map(product =>

                            <div className="col-12 col-md-2 col-sm-6 col-lg-2 col-xl-2" key={product.id}>

                                <a className="househover" onClick={this.selectMode} data-product={product.id}>
                                    <div className="productimg">
                                        <Image
                                            src={product.image[0].image_url}
                                            height={150}
                                            width={150}
                                        />

                                    </div>
                                    <div className="producttitle pt-2">

                                        <h5 className="productheading">{product.name}</h5>
                                    </div>
                                </a>
                                <div className="productprice"><span className="price">৳ {product.price}</span></div>
                                <div className="productaddtocart"></div>
                            </div>
                        )}


                    </div>
                </div>


                <Modal show={this.state.isOpen} onHide={this.handleClose} size="lg">
                    <Modal.Body>
                        { this.state.loading && <div className="text-center"><ClipLoader
                            color={'#DC143C'}
                        /></div> }
                        { this.state.showcontent &&
                        <div className="row mt-3">
                            <div className="col-md-6">
                                <img src={this.state.imageurl} className="img-fluid"/>
                            </div>
                            <div className="col-md-6 details">

                                <h3 className="product-title">{this.state.singleproduct.name}</h3>
                                <h5 className="productpricepopup"><span
                                    className="price">BDT ৳ {this.state.singleproduct.price}</span></h5>

                                <p className="product-description"> {this.state.singleproduct.description}</p>

                                <div className="quantity">
                                    <div className="minusbutton quantitybutton">
                                        <button type="button" className="btn btn-light btn-lg"><i
                                            className="fas fa-minus"></i></button>
                                    </div>
                                    <div className="productquantity quantitybutton">
                                        <div className="quantitybag">1</div>
                                        <span className="inbag">in bag</span>
                                    </div>
                                    <div className="plusbutton quantitybutton">
                                        <button type="button" className="btn btn-light btn-lg"><i
                                            className="fas fa-plus"></i></button>
                                    </div>
                                </div>
                                <div className="buynowbutton  quantitybutton ml-5">
                                    <button type="button" className="btn btn-light buybuttoncolor btn-lg"><i
                                        className="fas fa-cart-plus"></i> Bay Now
                                    </button>
                                </div>

                            </div>

                        </div>
                        }
                    </Modal.Body>

                </Modal>
            </section>

        );
    }
}

export default Recomendet;