ReactJS, एक और मॉडल के शीर्ष पर मॉडल दिखाएं

मैं किसी अन्य मोडल घटक पर शीर्ष पर एक मोडल घटक प्रदर्शित करने का प्रयास कर रहा हूं। जब चैनलडिटेल (प्रथम मोडल) क्लास के अंदर एक बटन क्लिक किया जाता है, तो दूसरा मोडल टॉप (क्लास मोडल) पर खुलने वाला होता है। हालांकि, यह पहले मोडल के पीछे खुल रहा है और पहले मोडल से राज्यों को दूसरे मोडल में ठीक से पास नहीं किया जा रहा है। उचित प्रॉप्स के साथ ठीक से खोलने के लिए मैं दूसरा मोडल कैसे प्राप्त कर सकता हूं?

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) => {
      e.preventDefault(); 
      this.setState({ outage: e.target.value })
      document.querySelector('.bg-modal-outage').style.display = 'block';
    }

    fileHandler = (event) => {
        let fileObj = event.target.files[0];
        //just pass the fileObj as parameter
        ExcelRenderer(fileObj, (err, resp) => {
          if(err){
            console.log(err);            
          } else{
            this.setState({
              cols: resp.cols,
              rows: resp.rows
            });
          }
        });               
    }

    render() {
      const { channelSelectedData } = this.props
       if (this.props.channelSelectedData.length >= 1 && this.props.datatype != 'slar'){         
            return(
              <div>
                <div> <Modal data={this.state.outage} type={this.state.d}/> </div>
                <div className="channel-detail-box">
                      <p>Channel Selected: {this.props.channelSelectedData[0].channel}</p>
                      <p>Inspected: {this.props.channelSelectedData.length} time(s)</p>
                      <p>Last Inspection Date: {this.props.channelSelectedData[0].scanned}</p>
                      <p>Outages: {channelSelectedData.map(({ outage }) => <button value={outage} onClick={this.showOutageFiles}>{outage + ', '}</button>)}</p>
                </div>      
              </div>
            )
        } else {
            return (
                <div>
                    <p>No data found</p>
                </div>
            )
        }
    }
}

export default ChannelDetail

import React, { Component } from 'react'
import './style.css'

export class Modal extends React.Component {

    // closes modal for outage files 
    hideOutageFile = () => {
        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 (
                <div className="bg-modal-outage">
                    <div className="modal-outage-content">
                        <span className="close-Btn" onClick={this.hideOutageFile}>&times;</span>
                        <h2 style={textStyle}>{this.props.data}</h2>
                        <p> 
                            <a href={excelANDE[this.props.data]}>Download Spreadsheet <i class="fas fa-file-excel"></i></a> <br/> 
                            <a href={reportsANDE[this.props.data]}> Download Report <i class="fas fa-file-pdf"></i></a>
                        </p> 
                    </div>
                </div> 
            )
        }
    }
}

export default Modal