Reactjs and antd modals - code issues

Question

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.

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

My error is a syntax error? I've tried to set the state in the constructor but its then undefined.

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

my code looks more complex, but looks like this.

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

Answer 1

react initial state & ES 6 class

import { Modal, Button } from 'antd';

class App extends React.Component {
  constructor(props){
      super(props);
      this.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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

Your example shows how to use state outside contructor method. This is called class properties and is not a part of ES6 spec.

First you should know standard/default react ES6 class syntax:

// example code here
import React, { Component } from 'react';

class App extends Component {  // same as React.Component
  constructor(props) {
    super(props); // you always need to call super();

    this.state = {
      visible: false,
    }
  }

  // other methods, lifecycle methods, render method etc.
  // ...
}

To use class properties you need to install a babel plugin babel-plugin-transform-class-properties. For examples and installation guide go here.

If you are using webpack2 here is my babel setup. Might be useful for you:

...
module: {
  rules: [
    // .js(x) loading
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'babel-loader',
          query: {
            // Ignore the .babelrc at the root of our project-- that's only
            // used to compile our webpack settings, NOT for bundling
            babelrc: false,
            presets: [
              ['env', {
                // Enable tree-shaking by disabling commonJS transformation
                modules: false,
                // Exclude default regenerator-- we want to enable async/await
                // so we'll do that with a dedicated plugin
                exclude: ['transform-regenerator'],
              }],
              // Transpile JSX code
              'react',
            ],
            plugins: [
              'transform-object-rest-spread',
              'syntax-dynamic-import',
              'transform-regenerator',
              'transform-class-properties',
              'transform-decorators-legacy',
            ],
          },
        },
      ],
    },
  ],
},
...

Answer 3

You have to put the initial state in the class constructor (https://facebook.github.io/react/docs/state-and-lifecycle.html)

constructor(props){
  super(props);
  this.state = { visible: false }
}