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,

I want to change the trigger={ Open Modal } for a different element with a class set.

Does it possible?

I have the following React ponent for the Modal:

import React from "react";
import Popup from "reactjs-popup";

import projectStyles from '../styles/project.module.scss'


class PopupVideo extends React.Component {

    render() {
        return(

            <Popup trigger={<button className="button"> Open Modal </button>} modal>
            {close => (
            <div className={projectStyles.modal}>
                <a className={projectStyles.close} onClick={close}>
                &times;
                </a>
                <div className={projectStyles.header}> Modal Title </div>
                <div className={projectStyles.content}>
                {" "}
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
                modi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae
                explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
                <br />
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
                modi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae
                explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
                </div>
                <div className={projectStyles.actions}>

                <button
                    className="button"
                    onClick={() => {
                    console.log("modal closed ");
                    close();
                    }}>
                    CERRAR
                </button>
                </div>
            </div>
            )}
        </Popup>
        )
}

}

export default PopupVideo;

Then I paste it on my Site within index.js (Working with Gatsby JS):

import PopupVideo from "../ponents/popup"

const IndexPage = () => {

    const data = useStaticQuery(graphql`
        query{
            site{
                siteMetadata{
                    title
                    description
                    siteUrl
                }
            }        
    `)

    return(
        <Layout>
            <PopupVideo />
        </Layout>

    )
}

export default IndexPage

Within the index.js is the place where I want to trigger the modal with a different element with an specific class.

I am a beginner with React, so I hope someone can help

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,

I want to change the trigger={ Open Modal } for a different element with a class set.

Does it possible?

I have the following React ponent for the Modal:

import React from "react";
import Popup from "reactjs-popup";

import projectStyles from '../styles/project.module.scss'


class PopupVideo extends React.Component {

    render() {
        return(

            <Popup trigger={<button className="button"> Open Modal </button>} modal>
            {close => (
            <div className={projectStyles.modal}>
                <a className={projectStyles.close} onClick={close}>
                &times;
                </a>
                <div className={projectStyles.header}> Modal Title </div>
                <div className={projectStyles.content}>
                {" "}
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
                modi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae
                explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
                <br />
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
                modi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae
                explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
                </div>
                <div className={projectStyles.actions}>

                <button
                    className="button"
                    onClick={() => {
                    console.log("modal closed ");
                    close();
                    }}>
                    CERRAR
                </button>
                </div>
            </div>
            )}
        </Popup>
        )
}

}

export default PopupVideo;

Then I paste it on my Site within index.js (Working with Gatsby JS):

import PopupVideo from "../ponents/popup"

const IndexPage = () => {

    const data = useStaticQuery(graphql`
        query{
            site{
                siteMetadata{
                    title
                    description
                    siteUrl
                }
            }        
    `)

    return(
        <Layout>
            <PopupVideo />
        </Layout>

    )
}

export default IndexPage

Within the index.js is the place where I want to trigger the modal with a different element with an specific class.

I am a beginner with React, so I hope someone can help

• javascript
• reactjs
• gatsby

1 Answer 1

You can use the open property of reactjs-popup and make your ponent controlled. It means useState will be your single source of truth for your popup state.

// index.js
import React from 'react'
import PopupVideo from "../ponents/popup"

const IndexPage = () => {
  const [open, setOpen] = React.useState(false)
  return(
    <Layout>
      <button onClick={() => setOpen(true)}>open</button>
      <PopupVideo setOpen={setOpen} open={open} />
    </Layout>
  )
}


// popup.js
import React from "react";
import Popup from "reactjs-popup";

import projectStyles from '../styles/project.module.scss'

class PopupVideo extends React.Component {
  render() {
    return(
      <Popup open={this.props.open} modal>
        {() => ( 
          <>
            // ...
            <button onClick={() => this.props.setOpen(false)}>
              close
            </button>
          </>
        )}
      </Popup>
    )
  }
}