Correctly positioning a Modal without restructuring code React

Question

I have a class InventoryView which displays a list of stock items and is defined as follows :

class InventoryView extends Component {
   ...

render() {

   ...

   {  
   consumableItemsArray.map((row, key) =>
   <Item item={row} key={row.id} />
   )} 

  ...

}
}

The class Item is basically every stock in the list of stock items and is defined as follows :

class Item extends Component {
    ...

    render() {
    ...
    return (

        <HorizontalRow>
             ...

           <EditAStockItem></EditAStockItem>

        </HorizontalRow>
       )

    }

The class EditAStockItem is basically an edit button which when clicked should display a Modal and is defined as follows :

class EditAStockItem extends Component {

    constructor(props) {
        super(props)
        this.state = { isShowingInventoryUpdationModal: false }
    }


    editStockItem = event => {
        event.preventDefault()
        this.setState({ isShowingInventoryUpdationModal: true })


    }



    openInventoryUpdationHandler = () => {
        console.log('Inside openInventoryUpdationHandler')
        this.setState({
            isShowingInventoryUpdationModal: true
        });
    }



    closeInventoryUpdationHandler = () => {
        this.setState({
            isShowingInventoryUpdationModal: false
        });
    }

    render() {
        const { isShowingInventoryUpdationModal } = this.state  

       if(!isShowingInventoryUpdationModal)
        return <EditStockItemButton onClick={this.editStockItem}><i class="fa fa-edit" aria-hidden="true"></i></EditStockItemButton>

       else
       {
        return (
        <div>
        { this.state.isShowingInventoryUpdationModal ? <div onClick= 
          {this.closeInventoryUpdationHandler}></div> : null }

       <UpdateStockItemModal
          className="modal"
          show={this.state.isShowingInventoryUpdationModal}
          close={this.closeInventoryUpdationHandler}>
          Please insert a client name :
          </UpdateStockItemModal>
        </div>

       )}

    }
}

openInventoryUpdationHandler and closeInventoryUpdationHandler set the state of the variable isShowingInventoryUpdationModal which becomes true when the edit button is clicked. When the variable isShowingInventoryUpdationModal becomes true, a modal opens up and takes the place of the edit button thereby skewing the whole page up. I want the Modal to be on top of the entire page like a Modal does. Is there any way I can do this without changing the current structure of my code?

The Modal is defined as follows :

class UpdateStockItemModal extends Component  {

    constructor(props) {
        super(props)


        this.state = {

            show : props.show,
            close : props.close,
            children : props.children,
        }

    }


    prepareComponentState (props) {
    var usedProps = props || this.props

    this.state = {

            show : usedProps.show,
            close : usedProps.close,
            children : usedProps.children,
        }    

    }





    componentWillReceiveProps = async (nextProps) => {

        this.prepareComponentState(nextProps)
    }


    componentWillMount = async (props) => {

        this.prepareComponentState()
    }



    render() {

        var { stockName, totalQuantity, show, close, children } = this.state




    return (
            <div>

            <div className="modal-wrapper"
                style={{
                    transform: show ? 'translateY(0vh)' : 'translateY(-100vh)',
                    opacity: show ? '1' : '0'
                }}>


                <div className="modal-header">
                    <h3>Update Stock Item</h3>
                    <span className="close-modal-btn" onClick={close}>×</span>
                </div>


                <FormContainer>
                    <InputStockNameContainer>
                    <p>Enter Stock Name</p>
                    <InputText
                    type="text"
                    value={ stockName }

                    onChange={this.handleChangeInputStockName}
                    />
                    </InputStockNameContainer>


                    <InputTotalQuantityContainer>
                    <p>Enter Total Quantity</p>
                    <InputText
                    type="text"
                    value={ totalQuantity }

                    onChange={this.handleChangeInputTotalQuantity}
                    />
                    </InputTotalQuantityContainer>

                    </FormContainer>





                <div className="modal-footer">
                    <button className="btn-cancel" onClick={close}>CLOSE</button>
                    <button className="btn-continue" onClick = {this.handleIncludeClient}>CONTINUE</button>
                </div>
            </div>
        </div>
    )
    }
}


export default UpdateStockItemModal;

Answer 1

You can fix this whole thing with css, by having the modal with position fixed and to sit on top by using z-index.

Here you have my demo of a simple modal:

.modal {
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>