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


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

Answers 2
Added at 2017-01-01 03:01

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

render() {
  return (
             <button onClick={() =>}>Open Modal</button>
         <SkyLight hideOnOverlayClicked ref="simpleDialog" title="Test Modal">
             Text that appears inside the modal page
            <Button onClick={() => this.refs.simpleDialog.hide()} >Got It</Button>
  • 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


  • 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 :

nr: #1 dodano: 2017-01-01 03:01

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

<SkyLight isVisible={true} ref="simpleDialog" title="Test Modal">
nr: #2 dodano: 2017-01-03 20:01

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

componentDidMount() {;

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.

Source Show
◀ Wstecz