title: My dialog box produces an error when clicked
body: <p>I am trying to open a dialog when user clicks on the mail icon. However, everything seems to work but I get an error on console included below:</p>
  <pre><code>    index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me
      in div (created by Transition)
      in Transition (created by ForwardRef(Fade))
      in ForwardRef(Fade) (created by ForwardRef(Backdrop))
      in ForwardRef(Backdrop) (created by WithStyles(ForwardRef(Backdrop)))
      in WithStyles(ForwardRef(Backdrop)) (created by ForwardRef(Modal))
      in div (created by ForwardRef(Modal))
      in ForwardRef(Portal) (created by ForwardRef(Modal))
      in ForwardRef(Modal) (created by ForwardRef(Dialog))
      in ForwardRef(Dialog) (created by WithStyles(ForwardRef(Dialog)))
      in WithStyles(ForwardRef(Dialog)) (at emailPopUp.js:40)
      in emailPopUp (at NavigationBar.js:52)
      in div (created by ForwardRef(Grid))
      in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
      in WithStyles(ForwardRef(Grid)) (at NavigationBar.js:51)
      in div (created by ForwardRef(Grid))
      in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
      in WithStyles(ForwardRef(Grid)) (at NavigationBar.js:50)
      in div (created by ForwardRef(Toolbar))
      in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
      in WithStyles(ForwardRef(Toolbar)) (at NavigationBar.js:49)
      in header (created by ForwardRef(Paper))
      in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
      in WithStyles(ForwardRef(Paper)) (created by ForwardRef(AppBar))
      in ForwardRef(AppBar) (created by WithStyles(ForwardRef(AppBar)))
      in WithStyles(ForwardRef(AppBar)) (at NavigationBar.js:48)
      in NavigationBar (at App.js:9)
      in App (at src/index.js:9)
      in StrictMode (at src/index.js:8)
  </code></pre>
  <p>I am learning react.js and have no clue what is happening. Can you help me with what the error means and how I can fix the problem?</p>
  <p>My source code is included below:</p>
  <pre><code>import React, {useState} from 'react'
  import Dialog from '@material-ui/core/Dialog'
  import Button from '@material-ui/core/Button'
  import DialogContent from '@material-ui/core/DialogContent'
  import DialogContentText from '@material-ui/core/DialogContentText'
  import DialogTitle from '@material-ui/core/DialogTitle'
  import { Grid, TextField } from '@material-ui/core'
  import EmailIcon from '@material-ui/icons/Email'
  import { Component } from 'react'
  import PropTypes from 'prop-types'
  
  class emailPopUp extends Component {
      constructor(props) {
          super(props)
      
          this.state = {
               open : false,
          }
          this.handleClose = this.handleClose.bind(this)
          this.handleOpen = this.handleOpen.bind(this)
      }
      
      handleClose(){
          this.setState({
              open : false
          }
          )
      }
      handleOpen(){
          this.setState({
              open : true
          }
          )
      }
  
      render() {
          return(
          &lt;React.Fragment&gt;
              &lt;EmailIcon onClick={this.handleOpen}/&gt;
              &lt;Dialog open={this.state.open} &gt;
                  &lt;DialogTitle&gt;
                      Thank you.
                  &lt;/DialogTitle&gt;
                  &lt;DialogContent&gt;
                      &lt;DialogContentText&gt;
                          Thank you for showing interest in me. Please compose a message for me.
                      &lt;/DialogContentText&gt;
                      &lt;br/&gt;
                      &lt;TextField autoFocus margin='dense' label=&quot;Your Body mess&quot; defaultValue=&quot;Random Text.&quot; type=&quot;text&quot;/&gt;
                      &lt;Button onClick={()=&gt;{
                          window.open('mailto:'+&quot;random@gmail.com&quot;+'?cc='+&quot;Ola&quot;+'&amp;subject='+&quot;Hey&quot;+'&amp;body='+&quot;emailBody&quot;, '_self');
                          // this.handleClose()
                      }}&gt;Send&lt;/Button&gt;
                  &lt;/DialogContent&gt;
              &lt;/Dialog&gt;
          &lt;/React.Fragment&gt;
          )
      }
  }
  
  export default emailPopUp
  </code></pre>