title: ReactJS, Show Modal on Top of Another Modal
body: <p>I am trying to display a modal component on top on another modal component. When a button inside class ChannelDetail (first modal) is clicked, another modal is supposed to open on top (class Modal). However, it is opening behind the first modal and the states from the first modal is not properly being passed to the second modal. How can I get the second modal to open properly with the proper props?</p>
  <pre><code>import React, { Component } from 'react'
  import './style.css'
  import { ExcelRenderer} from 'react-excel-renderer';
  import Modal from './Modal'
  
  export class ChannelDetail extends Component {
  
      state = { rows: [], cols: [], outage: '', d: 'ande' };
  
      showOutageFiles = (e) =&gt; {
        e.preventDefault(); 
        this.setState({ outage: e.target.value })
        document.querySelector('.bg-modal-outage').style.display = 'block';
      }
  
      fileHandler = (event) =&gt; {
          let fileObj = event.target.files[0];
          //just pass the fileObj as parameter
          ExcelRenderer(fileObj, (err, resp) =&gt; {
            if(err){
              console.log(err);            
            } else{
              this.setState({
                cols: resp.cols,
                rows: resp.rows
              });
            }
          });               
      }
  
      render() {
        const { channelSelectedData } = this.props
         if (this.props.channelSelectedData.length &gt;= 1 &amp;&amp; this.props.datatype != 'slar'){         
              return(
                &lt;div&gt;
                  &lt;div&gt; &lt;Modal data={this.state.outage} type={this.state.d}/&gt; &lt;/div&gt;
                  &lt;div className=&quot;channel-detail-box&quot;&gt;
                        &lt;p&gt;Channel Selected: {this.props.channelSelectedData[0].channel}&lt;/p&gt;
                        &lt;p&gt;Inspected: {this.props.channelSelectedData.length} time(s)&lt;/p&gt;
                        &lt;p&gt;Last Inspection Date: {this.props.channelSelectedData[0].scanned}&lt;/p&gt;
                        &lt;p&gt;Outages: {channelSelectedData.map(({ outage }) =&gt; &lt;button value={outage} onClick={this.showOutageFiles}&gt;{outage + ', '}&lt;/button&gt;)}&lt;/p&gt;
                  &lt;/div&gt;      
                &lt;/div&gt;
              )
          } else {
              return (
                  &lt;div&gt;
                      &lt;p&gt;No data found&lt;/p&gt;
                  &lt;/div&gt;
              )
          }
      }
  }
  
  export default ChannelDetail
  </code></pre>
  <pre><code>
  
  import React, { Component } from 'react'
  import './style.css'
  
  export class Modal extends React.Component {
  
      // closes modal for outage files 
      hideOutageFile = () =&gt; {
          document.querySelector('.bg-modal-outage').style.display = 'none';
      }
  
      render () {
  
           // ANDE reports linked on the outage modal popup
           const reportsANDE = {
              'P1-1987': 'http://192.168.191.128:8080/P-IR-1-03650-1_R000(P1-1987).pdf',
              'P1-1992': 'http://192.168.191.128:8080/PA-IR-92-1-03640-31_R001(P1-1992).pdf',
              'P0211': 'http://192.168.191.128:8080/NA44-IR-03641-00001_R001(P0211).pdf',
              'P1011': 'http://192.168.191.128:8080/NA44-IR-31100-00002.pdf',
          }
  
          // ANDE excel files linked on the outage modal popup
          const excelANDE = {
              'P1-1987': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
              'P1-1992': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
              'P0211': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
              'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
          }
  
          const prop = 'text-align';
          const textStyle = { [prop]: 'center' };
          console.log(this.props.data)
  
          // Modal popup for downloading ANDE outage files
          if (this.props.type === 'ande'){
              return (
                  &lt;div className=&quot;bg-modal-outage&quot;&gt;
                      &lt;div className=&quot;modal-outage-content&quot;&gt;
                          &lt;span className=&quot;close-Btn&quot; onClick={this.hideOutageFile}&gt;&amp;times;&lt;/span&gt;
                          &lt;h2 style={textStyle}&gt;{this.props.data}&lt;/h2&gt;
                          &lt;p&gt; 
                              &lt;a href={excelANDE[this.props.data]}&gt;Download Spreadsheet &lt;i class=&quot;fas fa-file-excel&quot;&gt;&lt;/i&gt;&lt;/a&gt; &lt;br/&gt; 
                              &lt;a href={reportsANDE[this.props.data]}&gt; Download Report &lt;i class=&quot;fas fa-file-pdf&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/p&gt; 
                      &lt;/div&gt;
                  &lt;/div&gt; 
              )
          }
      }
  }
  
  export default Modal
  </code></pre>