I have my modal component in a different file and I'm trying to open it from another component

Question

BuySectionItem.js

    class BuySectionItem extends React.PureComponent {
        constructor( props ) {
            super( props );

            this.state = {
                modalIsOpen:        false,
            }
            this.toggleTicketModal = this.toggleTicketModal.bind( this );
        }

        toggleTicketModal = () => {
            this.setState( { modalIsOpen: ! this.state.modalIsOpen } );
        }

        componentDidMount() {
            // this.setActivePrice();
        }

        outputBuyButton( offer ) {
            // Universe ID override is present.

                return  <Button text="Buy Ticket" type="green-gradient" onClick={ this.toggleTicketModal }/>

            return null;
        }

        render() {
            <div>
                {this.state.modalIsOpen &&
                    <TicketModal isOpen={this.state.modalIsOpen} toggleTicketModal={ this.toggleTicketModal } />
                }
            </div>;
        }
    }

    export default BuySectionItem;

TicketModal.js

    import React from 'react';
    import Modal from 'react-modal';
    import PropTypes from 'prop-types';

    const customStyles = {
        content: {
            top:         '50%',
            left:        '50%',
            right:       'auto',
            bottom:      'auto',
            marginRight: '-50%',
            transform:   'translate(-50%, -50%)',
        },
    };

    Modal.setAppElement( 'body' )

    class TicketModal extends React.Component {

componentDidMount() {
        this.handleKeyEvents();
    }

    componentWillUnmount() {
        this.removeKeyHandler();
    }

    /**
     * Watch for the escape key when the modal is open to allow users to escape from the modal.
     */
    handleKeyEvents() {
        const handleKeyDown = event => {
            if ( event.keyCode === 27 ) {
                this.props.toggleTicketModal( event );
            }
        };

        /*
         * Attach our event listener to the window.
         */
        window.addEventListener( 'keydown', handleKeyDown );

        /*
         * Cancel the key event handling, and remove
         */
        this.removeKeyHandler = () => {
            window.removeEventListener( 'keydown', handleKeyDown );
        };
    }
    render() {
            const {
                isOpen,
                // pending,
                toggleTicketModal,
            } = this.props;
            return (
          <Modal
          isOpen={isOpen}
          onRequestClose={toggleTicketModal()}
          style={customStyles}
          contentLabel="Meal Modal"
          >
            <div className="modal-wrapper">
              <div className="container text-center">
                <h1>Hello</h1>
                <h2>ID of this modal is 100</h2>
                <h3>This is an awesome modal.</h3>
                <button onClick={toggleTicketModal()}>close</button>
              </div>
            </div>
          </Modal>
            )
        }
    }
    TicketModal.propTypes = {
        pending:           PropTypes.bool,
        toggleTicketModal: PropTypes.func,
        isOpen:            PropTypes.bool,
    };

    export default TicketModal;


As you can see I am trying to open the ticket modal component from the `buysectionitem` component on a button Click.

But for some reason the Modal doesn't seem to be opening.

When I kept a break point I see that the `togglemodal` function is being called but doesn't open at all.

I added some more code as I need guidance with the handle key events as well. This key event which was supposed to remove the modal from the screen when I click escape which doesn't seem to be working.

change `class BuySectionItem extends React.PureComponent {` to `class BuySectionItem extends React.Component {` , Pure Component are stateless , so use Component if you need state — Jigar Shah, Jan 02 '20 at 08:39
you are calling the toggleTicketModal function when the TicketModal renders,call it like this this will do — warmachine, Jan 02 '20 at 09:04
Omgg thanks a lot please can you add this as an answer. Thanks a lot it worked — Kavya nagendra, Jan 02 '20 at 09:08
you are welcome,i have added that in the answer ,please mark it solved. — warmachine, Jan 02 '20 at 09:13
please add proper code without typos. your BuySectionItem has typos and wrong syntaxed React code. — Ayyappa Gollu, Jan 02 '20 at 09:36

score 2 · Answer 1 · answered Jan 02 '20 at 09:36

2

Optimized code

class BuySectionItem extends React.Component {
  constructor() {
    super();
    this.state = {
      showModal: false
    };
  }

  handleOpenClose = () => {
    this.setState(prev => ({ showModal: !prev.showModal }));
  };
  render() {
    return (
      <div>
        <button onClick={this.handleOpenClose}>Trigger Modal</button>
        <Modal
          isOpen={this.state.showModal}
          contentLabel="Minimal Modal Example"
        >
          <TicketModal handleOpenClose={this.handleOpenClose} />
        </Modal>
      </div>
    );
  }
}
class TicketModal extends React.Component {
  render() {
    const { handleOpenClose } = this.props;
    return (
      <div>
        <button onClick={handleOpenClose}>Close Modal</button>
        <hr />
        <p>Welcome to opened model</p>
      </div>
    );
  }
}

Live demo

answered Jan 02 '20 at 09:36

akhtarvahid

9,445
2
26
29

1

@Kavyanagendra he just shown approach not actual code. please read patiently :) – Ayyappa Gollu Jan 02 '20 at 11:31
I looked at the live demo and tried implementing it. After that only i put my comment – Kavya nagendra Jan 02 '20 at 11:44
okay. i thought he has working live demo which does opening modal and closing it as per your requirement. simply keeping "this din't work for me" as comment doesn't justify his effort. that's why i said. never mind :) let's close this loop. it was just a suggestion. – Ayyappa Gollu Jan 02 '20 at 11:57
True I'm sorry I'll be more specific – Kavya nagendra Jan 03 '20 at 10:49

score 1 · Accepted Answer · answered Jan 02 '20 at 09:12

1

you are calling the toggleTicketModal function when the TicketModal renders,call it like this

<button onClick={()=>toggleTicketModal()}>close</button>

this will do.

answered Jan 02 '20 at 09:12

warmachine

376
1
8

you can simply say, as toggleTIcketModal itself is a function. – Ayyappa Gollu Jan 02 '20 at 09:33
in some cases your functions need args ,so better use a uniform standard in your code – warmachine Jan 02 '20 at 09:40
i don't agree with being uniform but your approach might help if we want to do some action with event before callig toggleTIcketModal. – Ayyappa Gollu Jan 02 '20 at 09:43
in the above code ,the toggleTicketModal does not have any arguments , as it is dealing with binary data,but in cases you need to pass different arguments to your function ,so why use different style of coding ,that is what i meant by uniform. – warmachine Jan 02 '20 at 09:55
ofcourse toggleTicketModal has arguments when it was defined inside ButtonSectionItem. – Ayyappa Gollu Jan 02 '20 at 10:08
toggleTicketModal = () => { this.setState( { modalIsOpen: ! this.state.modalIsOpen } ); } this is method dude,where do you see args????? – warmachine Jan 02 '20 at 10:10
as of now it doesn't .but it can have. one performance issue with your approach is unnecessary creation of new function every time the component re-renders. which is not there in my approach. – Ayyappa Gollu Jan 02 '20 at 10:24
I will research more and come back:) – Ayyappa Gollu Jan 02 '20 at 10:31

score 1 · Answer 3 · answered Jan 02 '20 at 09:31

there are many mistakes in your code. button onclick handler in modal should be like following,

    <button onClick={toggleTicketModal}>close</button>

also you don't have to do same handling while closing the modal, following is redundant inside Modal props

onRequestClose={toggleTicketModal}

also main container in your case BuySectionItem.js has few issues. 1.there is no return in render method. 2.conditional rendering is not done correctly, you are never calling outPutBuyButton based on modalIsOpen state 3. you have used name "isModalOpen" instead of "modalIsOPen" , bad typo.

here's working code. modify as per your needs.

https://codesandbox.io/s/gracious-hopper-vmerd

1. That is a mistake sorry while i was editing the code my bad . 2. outputBuyButton is being called in another component thats why you can't see that call 3. That was another typo oops sorry I'll change all this and thats for the edited code on sandbox — Kavya nagendra, Jan 02 '20 at 11:07

I have my modal component in a different file and I'm trying to open it from another component

3 Answers3