I'm using a Modal dependency called 'react-responsive-modal'. It was working perfect but suddenly it stopped and there appeared an error message:

Unexpected use of 'open' no-restricted-globals

This error message is referencing this code line:

<Modal open={open}  onClose={this.onCloseModal} onExited={this.onExited} top>

Does anybody know how to solve it? Thank you

import React, { Component } from 'react'  
import Modal from 'react-responsive-modal';

class Interiores extends Component {
  constructor(props) {
    super(props)
    this.state = {        
      open: false
    }
  }

  onOpenModal = () => {
    this.setState({ open: true });     
  };

  onCloseModal = () => {
    this.setState({ open: false });
  };  
    
  render () {
    return (
      <div>             
        <button onClick={this.onOpenModal}>Open modal</button>
         
        <Modal open={open}  onClose={this.onCloseModal} onExited={this.onExited} top>
          <div>
            <h2>Simple centered modal</h2>
            <p>Text here</p>
          </div>
        </Modal>
      </div>
    );
  }
}

I'm using a Modal dependency called 'react-responsive-modal'. It was working perfect but suddenly it stopped and there appeared an error message:

Unexpected use of 'open' no-restricted-globals

This error message is referencing this code line:

<Modal open={open}  onClose={this.onCloseModal} onExited={this.onExited} top>

Does anybody know how to solve it? Thank you

import React, { Component } from 'react'  
import Modal from 'react-responsive-modal';

class Interiores extends Component {
  constructor(props) {
    super(props)
    this.state = {        
      open: false
    }
  }

  onOpenModal = () => {
    this.setState({ open: true });     
  };

  onCloseModal = () => {
    this.setState({ open: false });
  };  
    
  render () {
    return (
      <div>             
        <button onClick={this.onOpenModal}>Open modal</button>
         
        <Modal open={open}  onClose={this.onCloseModal} onExited={this.onExited} top>
          <div>
            <h2>Simple centered modal</h2>
            <p>Text here</p>
          </div>
        </Modal>
      </div>
    );
  }
}

• javascript
• reactjs

• exact but i don't know how to solve it – claudiopb Commented Aug 21, 2018 at 2:34
• 1 it was probably being used destructured from state. in render() { const { open } = this.state; return ( ... ); } – Derek Commented Aug 21, 2018 at 2:36
• 1 this.state.open – Andy Ray Commented Aug 21, 2018 at 2:46

1 Answer 1

This is because open is a reserved keyword in js .

http://www.javascripter/faq/reserved.htm

I reckon you will be better off destructuring your state in your render method like

const {open} = this.state

But given the intention of the variable, IMHO it would be better to name is as isOpen:false .

Or change the render method as

      <Modal 
        open={this.state.open}
        onClose={this.onCloseModal}
        onExited={this.onExited}
        top
      >
        <div>
          <h2>Simple centered modal</h2>
          <p>Text here</p>
        </div>
      </Modal>
    </div>
  );
}