title: Set trigger reactjs-popup
body: <p>I am trying to figure out how to change the trigger on my React Modal popup. I would like to trigger a different element on my Site. I would like to trigger an element by its Class or ID,</p>
  
  <p>I want to change the trigger={ Open Modal } for a different element with a class set.</p>
  
  <p>Does it possible?</p>
  
  <p>I have the following React component for the Modal:</p>
  
  <pre><code>import React from "react";
  import Popup from "reactjs-popup";
  
  import projectStyles from '../styles/project.module.scss'
  
  
  class PopupVideo extends React.Component {
  
      render() {
          return(
  
              &lt;Popup trigger={&lt;button className="button"&gt; Open Modal &lt;/button&gt;} modal&gt;
              {close =&gt; (
              &lt;div className={projectStyles.modal}&gt;
                  &lt;a className={projectStyles.close} onClick={close}&gt;
                  &amp;times;
                  &lt;/a&gt;
                  &lt;div className={projectStyles.header}&gt; Modal Title &lt;/div&gt;
                  &lt;div className={projectStyles.content}&gt;
                  {" "}
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
                  commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae
                  explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
                  &lt;br /&gt;
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
                  commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae
                  explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
                  &lt;/div&gt;
                  &lt;div className={projectStyles.actions}&gt;
  
                  &lt;button
                      className="button"
                      onClick={() =&gt; {
                      console.log("modal closed ");
                      close();
                      }}&gt;
                      CERRAR
                  &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              )}
          &lt;/Popup&gt;
          )
  }
  
  }
  
  export default PopupVideo;
  
  </code></pre>
  
  <p>Then I paste it on my Site within index.js (Working with Gatsby JS):</p>
  
  <pre><code>import PopupVideo from "../components/popup"
  
  const IndexPage = () =&gt; {
  
      const data = useStaticQuery(graphql`
          query{
              site{
                  siteMetadata{
                      title
                      description
                      siteUrl
                  }
              }        
      `)
  
      return(
          &lt;Layout&gt;
              &lt;PopupVideo /&gt;
          &lt;/Layout&gt;
  
      )
  }
  
  export default IndexPage
  
  </code></pre>
  
  <p>Within the index.js is the place where I want to trigger the modal with a different element with an specific class.</p>
  
  <p>I am a beginner with React, so I hope someone can help</p>