javascript - ReactJS, Show Modal on Top of Another Modal - Stack Overflow|Programmer puzzle solving

I am trying to display a modal ponent on top on another modal ponent. 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?

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

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

Share Improve this question asked Nov 5, 2020 at 15:29 saima m 591 silver badge7 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

Suggestion

try using z-index

link enter link description here

Your .bg-modal-outage ponent could receive a property that is passed through

<Modal data={this.state.outage} type={this.state.d}/> </div>.

Something like:

<Modal data={this.state.outage} type={this.state.d} isActive={yourClickEvent}/> </div>

And in the Modal ponent use something like

<div className="bg-modal-outage" style={{ display: isActive ? "block" : "none" }}>

Programmer puzzle solving

javascript - ReactJS, Show Modal on Top of Another Modal - Stack Overflow

2 Answers 2

Articles related to this article

comment list (0)