Кнопка React Component для запуска модального режима в другом компоненте (с использованием response-bootstrap)

Question

У меня есть productCard, где нажата кнопка addToCart, модал shoppingCart, который появляется после того, как это произошло, и компонент приложения, который отображает все это.Я с трудом передаю событие click от кнопки addToCart (в productCard Comp), чтобы вызвать метод handleShow () в (shoppingCart comp).Вот мой код:

shoppingCart.js:

import React from "react";
import {
  Popover,
  Tooltip,
  Button,
  Modal,
  OverlayTrigger
} from "react-bootstrap";
// import { ProductCard } from "./productCard.js";
import "./shoppingCart";

export class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);

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

    this.state = {
      show: false
    };
  }

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

  //I'm trying to trigger this method from the onClick event in 
  //productCard.js

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

  render() {
    return (
      <div>

        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Your Cart</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <p>Current Items: </p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.handleClose}>Continue Shopping</Button>
            <Button>Checkout</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }

}

productCard.js

import React from "react";
import { Grid, Row, Col, Thumbnail, Button } from "react-bootstrap";
import { ShoppingCart } from "./shoppingCart.js";
import "./productCard.css";

export class ProductCard extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="ProductCard">
        <Grid className="Grid">
          <Row>
            <Col xs={12} sm={6} md={3}>
              <Thumbnail
                className="Thumbnail"
                src="http://placehold.jp/300x200.png"
                alt="300x200"
              >
                <h3>Product Name</h3>
                <p>Description</p>
                <p>
                  <Button bsStyle="primary">Read More</Button>
                  &nbsp;
                  <Button bsStyle="success" onClick={this.props.handleShow}>Add to Cart</Button>
                </p>
              </Thumbnail>
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

Я уверен, что это простое недоразумение, но у меня возникают проблемы, когда я оборачиваюсь вокруг этого, и это удерживает меня достаточно долго.Спасибо за любую помощь!