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

Question

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

Answers 2
Added at 2017-01-01 03:01
Tags
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

Answers
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() {
    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.

Source Show
◀ Wstecz