Reactjs make reusable custom modal

Question

I am trying to make a modal reusable:

this is my component:

class OverleyModal extends Component {

  constructor(props) {
    super(props);
  }

  openModal = () => {
     document.getElementById("myOverlay").style.display = "block";
  }

  closeModal = () => {
    document.getElementById("myOverlay").style.display = "none";
  }



  render() {
    return (

    <React.Fragment>
        <div id="myOverlay" className="overlay">
            <div className="overlay-content">
                <p>content goes there</p>
            </div>
        </div>
    </React.Fragment>

    )
  }
}

export default OverleyModal;

The above component is working great for the purpose of modal, that is why i didn't include here CSS/style, the issue not about CSS.

I want, when i mount this component on any compoenet like thise below:

<overleyModal open={true} />

if open=true, the modal will be visiable

<overleyModal open={false} />

and if open={false} the modal will disappear

You can see how i deal open and close modal in the coponent method openModal() and closeModal()

But i am going through the trouble to make it reliable, I just want to use open as props, nothing else. if open is true, it will appear and if false, it will disappear.

Can anyone please help me in this case?

Answer 1

You need to make use of props and control the opening and closing through it by conditionally rendering it. You can also make the content generic by passing it as props too

class OverlayModal extends Component {
  render() {
    const { open, content } = this.props
    return open? <React.Fragment>
        <div id="myOverlay" className="overlay">
            <div className="overlay-content">
                <p>{content}</p>
            </div>
        </div>
    </React.Fragment>: null
  }
}

export default OverlayModal;

and use it like

<OverlayModal open={true} content={content goes there'} />

or even better you can define the content as children to give you more styling options

class OverlayModal extends Component {
  render() {
    const { open, children} = this.props
    return open? <React.Fragment>
        <div id="myOverlay" className="overlay">
            <div className="overlay-content">
                {children}
            </div>
        </div>
    </React.Fragment>: null
  }
}

export default OverlayModal;

and using as

<OverlayModal open={true} ><p>content goes there</p></OverlayModal >

Answer 2

open can be a property value and modal can be rendered conditionally based on the prop value. There is no need to directly access dom element.

return props.open ? (
  <div id="myOverlay" className="overlay">
    <div className="overlay-content">
      <p>content goes there</p>
    </div>
  </div>
) : null;