State for open / close a modal window not working properly in reactjs

86 views Asked by At

I want to Open a Modal window when i Click on a button. You can find the complete code below.

When i clic the button, the handleClickOpen function is correctly trigerred (the debug console print the trace i have added). Unfortunatly, the modal never Open. I think i have a problem with the manage of my state.

Any help would be appreciated. Thanks !

var PleadeToolLinkArk = function (_Component) {
  _inherits(PleadeToolLinkArk, _Component);
  
  function PleadeToolLinkArk(props) {
        _classCallCheck(this, PleadeToolLinkArk);

        var _this = _possibleConstructorReturn(this, _Component.call(this, props));

        _this.state = {
          open: props.open
        };
        _this.state.open = false;
        _this.handleClickOpen = _this.handleClickOpen.bind(_this);
        _this.handleClose = _this.handleClose.bind(_this);
        return _this;
      }
  
  PleadeToolLinkArk.prototype.handleClickOpen = function handleClickOpen() {
      console.log('In PleadeToolLinkArk.prototype.handleClickOpen');
      console.log(this.state.open);
        this.setState({ open: true });
      };

  
      PleadeToolLinkArk.prototype.handleClose = function handleClose() {
          console.log('in 3333');
        this.setState({ open: false });
      };
  
  PleadeToolLinkArk.prototype.render = function render() {
    var _props = this.props,
        label = _props.label,
        variant = _props.variant,
        otherProps = _objectWithoutProperties(_props, ['label', 'variant']);
    
    return React.createElement(
      MiradorMenuButton,
      _extends({
        'aria-label': label
      }, otherProps),
      React.createElement(LinkSharpIcon, { onClick: this.handleClickOpen },
              
              
              
              React.createElement(
                        Dialog,
                        { open: this.state.open, onClose: this.handleClose },
                        // Dialog content goes here
                        React.createElement('p', null, 'This is a dialog content.'),
                        React.createElement(
                          Button,
                          { onClick: this.handleClose, color: 'primary' },
                          'Close'
                        )
                      )
              
              
              
    )
    );
  };

  return PleadeToolLinkArk;
}(Component);

export { PleadeToolLinkArk as default };


PleadeToolLinkArk.propTypes = process.env.NODE_ENV !== "production" ? {
  containerId: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  variant: PropTypes.string.isRequired
} : {};```
0

There are 0 answers