Immediately-invoked function expression inside JSX

Question

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?

Module build failed: SyntaxError: Unexpected token, expected } (35:9)

33 |             return (<div className="loading" />);
34 |           } 
35 |         }()}
   |          ^
36 |       </div>
37 |     );
38 |   }

@ ./src/containers/SearchApp.js 7:0-52
@ ./src/containers/App.js
@ ./src/index.js
@ multi ./src/index

---

The part of code:

render() {
return (
  <div>
    <div className="form-group">
      <input onKeyDown={this.searchEnter.bind(this)} type="text" ref="tag" className="form-control input-lg search-bar" placeholder="Enter the tag..." />
      <button onClick={this.searchClick.bind(this)} type="button" className="btn btn-default search-button">Search!</button>
    </div>
    {()=>{
      if (this.props.status === 'PENDING') {
        return (<div className="loading" />);
      }
    }()}
  </div>
);

Answer 1

This is Immediately-invoked function expression.

Error With your code?

You need to wrap the function inside (), Check this:

{
   (() => {
      if (this.props.status === 'PENDING') {
         return (<div className="loading" />);
      }
   })()
}

what the pattern, "{()=>{}()}", is doing in this context?

Directly we can't put if/else statement or any other statement inside JSX, so for that we need to create a function and put all the logic inside that.

As per DOC:

if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. If a ternary expression isn't robust enough, you can use if statements outside of your JSX to determine which components should be used. Or if you prefer a more "inline" aesthetic, define immediately-invoked function expressions inside your JSX.

Another way of writing the same code:

render(){
    return(
        <div>
            <div className="form-group">
                ....   
            </div>
            {this._callFun()}    
        </div>
    )
}

_callFun(){
    if (this.props.status === 'PENDING') {
        return (<div className="loading" />);
    }
}