How can I use an IIFE in the return function of a react component?

Question

I have a modal page popping up when the user clicks a button, it's working perfectly :

render() {
  return (
     <div>
         <section>
             <button onClick={() => this.refs.simpleDialog.show()}>Open Modal</button>
         </section>
         <SkyLight hideOnOverlayClicked ref="simpleDialog" title="Test Modal">
             Text that appears inside the modal page
            <Button onClick={() => this.refs.simpleDialog.hide()} >Got It</Button>
         </SkyLight>
    </div>
)}

• But My goal is to open the modal automatically when the user opens the page for the first time.

• I don't want to open the modal page by clicking on a button

Question:

• Can I use an IIFE (An immediately-invoked function expression) in order to open the modal as soon as the user open the page ?

• My approach was to set a boolean to true. Then open the modal if the value is set to true

Library being used for the modal : https://github.com/marcio/react-skylight

Answer 1

I think what you're looking for is the componentDidMount() lifecycle method:

componentDidMount() {
    this.refs.simpleDialog.show();
}

From the React docs:

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

Feel free to checkout other component lifecycle methods.

Answer 2

To have a model open on component mount, just set isVisible to true

<SkyLight isVisible={true} ref="simpleDialog" title="Test Modal">