ReactJs - Creating an “If” component… a good idea?

Question

I\'ve read in the React docs that \"if\" type statements can\'t be used in JSX code, because of the way JSX renders into javascript, it doesn\'t work out as one would expect

Answer 1

For maintainable code skip unnecessary abstractions like If and add some control logic with an early termination before the return statement in your render method, e.g.

import React from 'react-native';

let {
  Text
} = React;

let Main = React.createClass({
  setInitialState() {
    return { isShown: false }
  },
  render() {
    let content;
    if (this.state.isShown) {
      content = 'Showing true item'
    } else {
      return false;
    }
    return (
      {content}
    );
  }
});

Keeps you DRY. Lasting protection.