product details Cant show after click
Published: 2022-02-16 21:33:28

after product details click cant show  any data     show me blank page  help me anyone please 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfp4maj9ovm357rjdoii.jpg)

import React, { Component, Fragment } from 'react'
import { Container,Row,Col, Form,Button } from 'react-bootstrap'
import Product1 from '../../assets/images/product/product1.png'
import Product2 from '../../assets/images/product/product2.png'
import Product3 from '../../assets/images/product/product3.png'
import Product4 from '../../assets/images/product/product4.png'
import NavMenuDesktop from '../common/NavMenuDesktop'
import FooterDesktop from '../common/FooterDesktop'
import SuggestedProduct from '../ProductDetails/SuggestedProduct'



 class ProductsDetails extends Component {
  render() {
     let ProductAllData = this.props.data;  
     let title = ProductAllData['productList'][0]['title'];

    return (
        <Fragment>
         <Container fluid={true}  className="BetweenTwoSection">
            <NavMenuDesktop />
         
            <Row className="p-2">
<Col className="shadow-sm bg-white pb-3 mt-4" md={12} lg={12} sm={12} xs={12}>
<Row>
   <Col className="p-3" md={6} lg={6} sm={12} xs={12}>
   <img className="w-100" src={Product1} />
   <Container  className="my-3">
        <Row>
             <Col className="p-0 m-0"  md={3} lg={3} sm={3} xs={3}>
                  <img className="w-100" src={Product1} />
             </Col>
             <Col className="p-0 m-0" md={3} lg={3} sm={3} xs={3}>
                  <img className="w-100" src={Product2} />
             </Col>
             <Col className="p-0 m-0" md={3} lg={3} sm={3} xs={3}>
                  <img className="w-100" src={Product3} />
             </Col>
             <Col className="p-0 m-0" md={3} lg={3} sm={3} xs={3}>
                  <img className="w-100" src={Product4} />
             </Col>
        </Row>
   </Container>
   </Col>
   <Col className="p-3 " md={6} lg={6} sm={12} xs={12}>
   <h5 className="Product-Name">{title} </h5>
   <h6 className="section-sub-title">Some Of Our Exclusive Collection, You May Like Some Of Our Exclusive Collectio</h6>
   <div className="input-group">
        <div className="Product-price-card d-inline ">Reguler Price 200</div>
        <div className="Product-price-card d-inline ">50% Discount</div>
        <div className="Product-price-card d-inline ">New Price 100</div>
   </div>
   <h6 className="mt-2">Choose Color</h6>
   <div className="input-group">
        <div className="form-check mx-1">
             <input className="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" />
             <label className="form-check-label" htmlFor="exampleRadios1">Black</label>
        </div>
        <div className="form-check mx-1">
             <input className="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" />
             <label className="form-check-label" htmlFor="exampleRadios1">Green</label>
        </div>
        <div className="form-check mx-1">
             <input className="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" />
             <label className="form-check-label" htmlFor="exampleRadios1">Red</label>
        </div>
   </div>

   <h6 className="mt-2">Choose Size</h6>
   <div className="input-group">
        <div className="form-check mx-1">
             <input className="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" />
             <label className="form-check-label" htmlFor="exampleRadios1">X</label>
        </div>
        <div className="form-check mx-1">
             <input className="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" />
             <label className="form-check-label" htmlFor="exampleRadios1">XX</label>
        </div>
        <div className="form-check mx-1">
             <input className="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" />
             <label className="form-check-label" htmlFor="exampleRadios1">XXXX</label>
        </div>
   </div>


   </Col>
</Row>

</Col>
            </Row>
        </Container>
        <SuggestedProduct />
        <FooterDesktop/>
            
        </Fragment>
    )
  }
}

export default ProductsDetails