Я новичок в reactjs и пытаюсь использовать модальные функции antd. Однако, когда я включаю базовый пример кода в свою базу кода, у меня остаются некоторые ошибки - мне пришлось удалить двоеточия, конечные запятые, и я получаю сообщение об ошибке с переменной состояния.

https://ant.design/components/modal/

import { Modal, Button } from 'antd';

class App extends React.Component {
  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 (
      <div>
        <Button type="primary" onClick={this.showModal}>Open</Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

Моя ошибка - синтаксическая ошибка? Я пытался установить состояние в конструкторе, но тогда он не определен.

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 | 
> 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

мой код выглядит более сложным, но выглядит так.

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 (
      <div>
        <Spacers />

        <Button type='primary' onClick={this.showModal}>Open</Button>
        <Modal
          title='Basic Modal'
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>

      </div>
    )
  }
}