Creating and using HMTL5 dialog with react

App.css

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.showDialog = this.showDialog.bind(this);
    this.hideDialog = this.hideDialog.bind(this);
    this.state = {
      isOpen: false,
    };
  }

  showDialog() {
    this.setState({
      isOpen: true
    });
  }

  hideDialog() {
    this.setState({
      isOpen: false
    });
  }
  render() {
    const {isOpen} = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
          <img src={logo} alt="logo" className="App-logo"/>
        </header>

        <dialog id="dialog" open={isOpen}>  
          <button id="close" onClick={this.hideDialog}>Close Dialog</button>
          <h2>Dialog Title</h2>
          <img src={logo} alt="logo" className="App-logo"/>
          <p>Dialog content and other stuff will go here</p>
        </dialog>

        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <button id="open" onClick={this.showDialog}>Open Dialog</button>
      </div>
    );
  }
}

export default App;

index.css

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

logo.svg

Using HTML5.2 dialog with react by passing props is open on click of openDialog.

Here is how it looks