Geek Answers Handbook

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

I get a modal page, when the user clicks the button, it works fine:

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 automatically open modal mode when the user opens the page for the first time.

  • I do not want to open the modal page by clicking on the button

Question

  • Can I use IIFE (immediately called function expression) to open a modal as soon as the user opens the page?

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

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

+7
javascript reactjs react-jsx
source share
2 answers

I think you are looking for the componentDidMount () life cycle method:

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

From React docs :

componentDidMount() is called immediately after the component is installed. Initialization requiring DOM nodes should go here. If you need to download data from a remote endpoint, this is a good place to instantiate a network request. The setting state in this method will result in re-rendering.

Be sure to check out other component life cycle methods .

+4
source share

To open the model on component mounting, simply set isVisible to true

 <SkyLight isVisible={true} ref="simpleDialog" title="Test Modal">
+1
source share

More articles:


All Articles