Manipulate HTML5 dialog in React

Question

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

Rose Robertson · Accepted Answer · 2018-09-19 22:21:31Z

4

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.net/n5u2wwjg/193969/

edited Sep 19, 2018 at 22:21

answered Sep 19, 2018 at 22:14

Rose Robertson

1,2567 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sunny Over a year ago

Hello, is there anything might cause open attribute can't be removed properly? I added a state showDialog, and did () => {this.setState({showDialog: false})} inside the <i onClick={...here...}>, but it didn't remove the open attribute. p.s. I opened the dialog by doing show call in console.

Rose Robertson Over a year ago

Can you post your render method?

Rose Robertson Over a year ago

If you're showing/hiding the dialog from the console as well it will throw off the react component because the state will no longer match the dialog's state.

Nick Over a year ago

open attribute won't trap focus, you shall use showModal

Sigfried Over a year ago

According to html spec documentation and MDN: "Opening dialogs via HTMLDialogElement.show() is preferred over the toggling of the boolean open attribute."

|

Matt Greenberg · Accepted Answer · 2018-09-19 22:06:52Z

1

Welcome to SO. You can hide a react component by return null from the render function. You can define a flag in the state that determines weather or not your component 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>
    );
  }

}

answered Sep 19, 2018 at 22:06

Matt Greenberg

2,3301 gold badge18 silver badges29 bronze badges

1 Comment

Sunny Over a year ago

Thanks for your approach! It works fine, but the other answer is closer to my idea.

Collectives™ on Stack Overflow

Manipulate HTML5 dialog in React

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related