I'm trying to create a simple configuration dialog with close icon on top-right, but can't think of how to handle this in React. In other frameworks, I can simply use selector, and then use .showModal()/close() to open/close a dialog. However, I think we're not allowed, or not remended to directly manipulate DOM in React, so I wonder what's the proper way in this case.

My project outline

App.js

class App extends Component {
  ...
  ...
  return(
    <div>
      <ConfigPage />
      <ConfigButton />
      <MainContents />
    </div>
  )
}

I want to open a dialog, which is <ConfigPage />, by pressing the <ConfigButton /> I set, and close it by pressing the icon on the dialog.

config-page.js

class ConfigPage extends Component {
  ...
  ...
  return(
    <dialog>
      <header>
        <div>
          <i onClick={someCallback}></i>               
        </div>
      </header>
      <section></section>
    </dialog>
  )
}

I'm trying to create a simple configuration dialog with close icon on top-right, but can't think of how to handle this in React. In other frameworks, I can simply use selector, and then use .showModal()/close() to open/close a dialog. However, I think we're not allowed, or not remended to directly manipulate DOM in React, so I wonder what's the proper way in this case.

My project outline

App.js

class App extends Component {
  ...
  ...
  return(
    <div>
      <ConfigPage />
      <ConfigButton />
      <MainContents />
    </div>
  )
}

I want to open a dialog, which is <ConfigPage />, by pressing the <ConfigButton /> I set, and close it by pressing the icon on the dialog.

config-page.js

class ConfigPage extends Component {
  ...
  ...
  return(
    <dialog>
      <header>
        <div>
          <i onClick={someCallback}></i>               
        </div>
      </header>
      <section></section>
    </dialog>
  )
}

• javascript
• html
• reactjs

2 Answers 2

the HTML5 dialog also has an open attribute, correct? Instead of calling show/hide you could manipulate this attribute -

class ConfigPage extends Component {
  ...
  ...
  return(
    <dialog open={this.state.showDialog ? 'open' : false}>
      <header>
        <div>
          <i onClick={someCallback}></i>               
        </div>
      </header>
      <section></section>
    </dialog>
  )
}

And when you want to show/hide call this.setState({showDialog: true}) (or false)

Here's a js fiddle with a proof-of-concept: https://jsfiddle/n5u2wwjg/193969/

Wele to SO. You can hide a react ponent by return null from the render function. You can define a flag in the state that determines weather or not your ponent is visible. Here is a simple example.

class Modal extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isOpen: true;
    };
    this.onCloseClick = this.onCloseClick.bind(this);
  }


  onCloseClick(e) {
    e.preventDefault();
    this.setState({
      isOpen: false,
    });
  }


  render(){
    if (!this.state.isOpen) return null;
    return (
      <div>
        <button onClick={this.onCloseClick}>
          Close
        </button>
        <h1>What up, this a modal</h1>
      <div>
    );
  }

}