title: Immediately-invoked function expression inside JSX
body: <p>I am working on the React project where I am trying to compile but cannot find why I am getting this syntax error.    Specifically, what the pattern, "{()=>{}()}", is doing in this context?</p>
  
  <pre><code>Module build failed: SyntaxError: Unexpected token, expected } (35:9)
  
  33 |             return (&lt;div className="loading" /&gt;);
  34 |           } 
  35 |         }()}
     |          ^
  36 |       &lt;/div&gt;
  37 |     );
  38 |   }
  
  @ ./src/containers/SearchApp.js 7:0-52
  @ ./src/containers/App.js
  @ ./src/index.js
  @ multi ./src/index
  </code></pre>
  
  <hr>
  
  <p>The part of code:</p>
  
  <pre><code>render() {
  return (
    &lt;div&gt;
      &lt;div className="form-group"&gt;
        &lt;input onKeyDown={this.searchEnter.bind(this)} type="text" ref="tag" className="form-control input-lg search-bar" placeholder="Enter the tag..." /&gt;
        &lt;button onClick={this.searchClick.bind(this)} type="button" className="btn btn-default search-button"&gt;Search!&lt;/button&gt;
      &lt;/div&gt;
      {()=&gt;{
        if (this.props.status === 'PENDING') {
          return (&lt;div className="loading" /&gt;);
        }
      }()}
    &lt;/div&gt;
  );
  </code></pre>