How to use jsx-control-statements in reactjs?

Question

Im using jsx-control-statements in react app to add basic control statements. I've installed the same using npm and updated the .babelrc file as below

{
  "presets": ["react"],
  "plugins": ["jsx-control-statements"]
}

and I've the below jsx code

<IF condition={ selectedID !== null }>
 {this.renderData()}
</IF>

below is the function to initiate the selectID, I want to execute the renderData() only if the value not equal to null

getInitialState() {
    return {
        selectedID: null
    }
},

As of now Im getting a console error saying "Uncaught ReferenceError: IF is not defined" and the app is not loading. Can anyone tell me anything wrong here. Need help.

Answer 1

The best way to use jsx-control-statements in reactjs is NOT to use it at all. Why? because in my company we had it in our project and it only brought us unreadable, buggy and cluttered code.

Just think for a second you are encouraging moving business logic into your view component's jsx part which only should be used to output your already processed data. At first, it may look good but after a while, more and more logic will go there and it will become a problem.

So in your case what you can do is something like this:

{selectedID !== null && this.renderData()}