PopUpManager.jsx

import React, {Component} from 'react'
import {connect} from 'react-redux'
import classNames from 'classnames'

class InjectPoint extends Component {
  render () {
    const {popUpStack} = this.props
    const children = popUpStack.map((item, i) => {
      const clonedChild = React.cloneElement(item.Component, {
        ...item.Component.props,
        ref: item.Component.key,
        className: classNames('c-popup', item.Component.props.className)
      })

      return (
        <div
          key={item.Component.key + 'backdrop'}
          className='c-popup-modal'
          style={{zIndex: (i + 1) * 100 - 1}}>
          {clonedChild}
        </div>
      )
    })

    return (
      <div className='c-popup-inject-point'>
        {children}
      </div>
    )
  }
}

export default connect((state) => {
  return state.popUps
})(InjectPoint)