title: Reactjs and antd modals - code issues
body: <p>I am new to reactjs and I am trying to use the modal functionality from antd. However, when I incorporate the basic example code into my code base I am left with some errors -- I've had to remove the colons, the trailing commas and I am getting an error with the state variable.</p>
  
  <p><a href="https://ant.design/components/modal/" rel="nofollow noreferrer">https://ant.design/components/modal/</a></p>
  
  <pre><code>import { Modal, Button } from 'antd';
  
  class App extends React.Component {
    state = { visible: false }
    showModal = () =&gt; {
      this.setState({
        visible: true,
      });
    }
    handleOk = (e) =&gt; {
      console.log(e);
      this.setState({
        visible: false,
      });
    }
    handleCancel = (e) =&gt; {
      console.log(e);
      this.setState({
        visible: false,
      });
    }
    render() {
      return (
        &lt;div&gt;
          &lt;Button type="primary" onClick={this.showModal}&gt;Open&lt;/Button&gt;
          &lt;Modal
            title="Basic Modal"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
          &gt;
            &lt;p&gt;Some contents...&lt;/p&gt;
            &lt;p&gt;Some contents...&lt;/p&gt;
            &lt;p&gt;Some contents...&lt;/p&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, mountNode);
  </code></pre>
  
  <p>My error is a syntax error? I've tried to set the state in the constructor but its then undefined.</p>
  
  <pre><code>client:119 ./src/components/Video/VideoConference.js
  Module build failed: SyntaxError: D:/wamp/www/e-profound-react/src/components/Video/VideoConference.js: Unexpected token (631:8)
  
    629 |   }
    630 | 
  &gt; 631 |   state = { visible: false }
        |         ^
    632 |   showModal () {
    633 |     this.setState({
    634 |       visible: true,
  
   @ ./src/router.js 35:0-65
   @ ./src/index.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js
  </code></pre>
  
  <p>my code looks more complex, but looks like this.</p>
  
  <pre><code>class VideoConference extends React.Component {
  
    constructor (props) {
      super(props)
    }
  
    componentWillMount () {
  
    }
  
    componentWillUnmount () {
    }
  
    componentDidMount () {
    }
  
    state = { visible: false }
    showModal () {
      this.setState({
        visible: true,
      })
    }
    handleOk (e) {
      console.log(e)
      this.setState({
        visible: false,
      })
    }
    handleCancel (e) {
      console.log(e)
      this.setState({
        visible: false,
      })
    }
  
    render () {
  
      return (
        &lt;div&gt;
          &lt;Spacers /&gt;
  
          &lt;Button type='primary' onClick={this.showModal}&gt;Open&lt;/Button&gt;
          &lt;Modal
            title='Basic Modal'
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
          &gt;
            &lt;p&gt;Some contents...&lt;/p&gt;
            &lt;p&gt;Some contents...&lt;/p&gt;
            &lt;p&gt;Some contents...&lt;/p&gt;
          &lt;/Modal&gt;
  
        &lt;/div&gt;
      )
    }
  }
  </code></pre>