React | Virtual DOM Modal is not showing

Question

I'm using React JS and Ant Design for my project.

Problem

I'm creating virtual DOM element. It has Popover In that there is Button and then clicking that showing Modal.

It showing error Cannot read property 'setState' of undefined

JS Code

content = (
  <div className="RecurringPopover"> 
    <button onClick={this.showModal}> Show Modal </button> 
  </div>
);

Full Code on StackBlitz

@Striped. Click button inside popover. – Maria Jeysingh Anbu Feb 23 '18 at 12:11 — Maria Jeysingh Anbu, Feb 23 '18 at 12:11

score 1 · Accepted Answer · answered Feb 23 '18 at 12:12

1

You need to bind the method to the proper scope:

content = (
  <div className="RecurringPopover"> 
    <button onClick={this.showModal.bind(this)}> Show Modal </button> 
  </div>
);

answered Feb 23 '18 at 12:12

Gorka Hernandez

@MariaJeysinghAnbu Use the `visible` and `onVisibleChange` props as detailed in the documentation. **Sample:** https://stackblitz.com/edit/react-hk6f7r?file=index.js | **Docs:** https://ant.design/components/popover/ – Gorka Hernandez Feb 23 '18 at 12:32
How I suppose to do when I have muliple popover in page https://stackblitz.com/edit/react-wfaivz?file=index.js – Maria Jeysingh Anbu Feb 23 '18 at 13:14
This is getting out of topic, but you would need to have different properties in your state object and handle them separately. – Gorka Hernandez Feb 23 '18 at 14:07

tetar · Answer 2 · 2018-02-23T12:43:15.673

0

add on your constructor

 constructor(props) {
    super(props);
    this.showModal = this.showModal.bind(this)
    this.state = {
        // hereyour state
    };
}

or

onClick={this.showModal.bind(this)}

To close or open the modal you can do this

 showModal() {
    this.setState({
        modal: !this.state.modal
    });
}

edited Feb 23 '18 at 12:43

answered Feb 23 '18 at 12:14

tetar

How I suppose to hide popover when Modal opened. – Maria Jeysingh Anbu Feb 23 '18 at 12:25
you want to close the modal ? – tetar Feb 23 '18 at 12:41

2 Answers2