title: React: display modal when any card is clicked
body: <p>I'm new to React and have several cards that, when clicked, should open a modal however I don't know what to write in <code>&lt;Modal trigger={}&gt;</code>in my Modal component in order to get the Cards from the Card component.
  How would I link the modal to each card so that onClick of the card, the modal appears? </p>
  
  <p>Home.js</p>
  
  <pre><code>class Home extends React.Component {
      constructor(props) {
        super(props) 
        this.state = { isEmptyState: true }
      }
  
      triggerOpenAlertState = () =&gt; {
        this.setState({
      ...this.state,
      isEmptyState: false,
      isOpenAlertState: true
        })
      }
  
  
    render() {
      return (
        &lt;div&gt;
          &lt;i class="star outline icon big" id="favourites"&gt;&lt;/i&gt;
          &lt;GoogleAuth /&gt;
           &lt;div&gt;
        {this.state.isEmptyState &amp;&amp; &lt;Cards openAlert={this.triggerOpenAlertState} /&gt;}
  
        {this.state.isOpenAlertState &amp;&amp; &lt;ModalExample /&gt;}
      &lt;/div&gt;
      &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Modal.js</p>
  
  <pre><code>const ModalExample = () =&gt; (
    &lt;Modal trigger={}&gt;
      &lt;Modal.Header&gt;Sign In&lt;/Modal.Header&gt;
      &lt;Modal.Content&gt;
          &lt;p&gt;
          You must Sign In before you can add project ideas to your favourites.
          &lt;/p&gt;
      &lt;/Modal.Content&gt;
    &lt;/Modal&gt;
  )
  
  export default ModalExample
  </code></pre>
  
  <p>Cards.js</p>
  
  <pre><code>const Cards = props =&gt; {
      return (
      &lt;div class="row"&gt;
      &lt;div class="column"&gt;&lt;div onClick={props.openAlert} class="header card"&gt;Communication app for tenants/landlords&lt;/div&gt;&lt;/div&gt; 
          &lt;div class="column"&gt;&lt;div onClick={props.openAlert} class="header card"&gt;Code Snippet Manager&lt;/div&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;div onClick={props.openAlert} class="header card"&gt;Reservation Management System&lt;/div&gt;&lt;/div&gt;
          &lt;div class="column"&gt; &lt;div onClick={props.openAlert} class="header card"&gt;Budget Tracker&lt;/div&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;div onClick={props.openAlert} class="header card"&gt;Caesar Cipher&lt;/div&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;div onClick={props.openAlert} class="header card"&gt;Tax Calculator&lt;/div&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;div onClick={props.openAlert} class="header card"&gt;Meme Generator&lt;/div&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;div onClick={props.openAlert} class="header card"&gt;Virtual Interior Design app&lt;/div&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;div onClick={props.openAlert} class="header card"&gt;App for the Elderly&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>