Custom modal background diming in react

Question

I have the following code with me. Please help me how to add opacity or how to dim the background while modal is open.

Here is the working example

Answer 1

Add this backgroundColor property to your Modal component in line 57:

style={{
  display: this.state.display,
  backgroundColor: this.state.modalShow ? "red" : "none"
}}

What this does is that when the modalShow state is truthy (aka when it's shown) the backgroundColor returns red and none the other way. To dim it you can use rgba(0,0,0,.2) instead of red obviously

EDIT: sandbox