React simple mask layer

CSS code

.mask{
  background: rgba(0,0,0,0.4) !important;
  z-index: 10;
  height: 100vh;
  position: fixed;
  width: 100vw;
}
.selectMask_box{
  background: rgba(0,0,0,0);
  transition: all .2s linear
}

JS code

= handleMask () => {
 the this .setState ({ 
   dateSelected: ! the this .state.dateSelected 
}) 
}
 < div 
    onClick = { the this .handleMask} 
    className = $ {{ `selectMask_box the this .state.dateSelected? " mask " : " " }}`> // here is the content to be displayed, <div> ... </ div>
  // you can set the initial value dataSelected of themselves, but please note that the ternary operator's attention to the order. 
</ div>

  

Div into the top of the page to