What is the equivalent to ng-if in react.js?

How about ternary operator?

render() {
  return (
    this.props.showMe ? <button type="submit" className="btn nav-btn-red">SIGN UP</button> : null
  );
}

You can also use &&:

render() {
  return (
    this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button>
  );
}

Large block as in the comment can easily be handled by wrapping the JSX in ()s:

render() {
  return this.props.showMe && (
    <div className="container">
      <button type="submit" className="btn nav-btn-red">
        SIGN UP
      </button>
    </div>
  );
}

Also inline:

render() {
  return (
    <div className="container">
      {this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button>}
    </div>
  );
}

If you have other elements too you can wrap just the conditional like so:

render() {
  return (
    <div>Stuff</div>
    {this.props.showMe && (
      <button type="submit" className="btn nav-btn-red">SIGN UP</button>
    )}
    <div>More stuff</div>
  );
}

I am leaving this here for historical purposes, please see my edits below for a much better solution after having developed in react for a while I ended up creating an NgIf component (this is react native but probably works for react)

Code:

import React, {Component} from "react";

class NgIf extends Component {
  render() {
    if (this.props.show) {
      return (
        this.props.children
      );
    } else {
      return null
    }
  }
}

export default NgIf;

Usage:

...
import NgIf from "./path/to/component"
...

class MyClass {
   render(){
      <NgIf show={this.props.show}><Text>This Gets Displayed</Text></NgIf>
   }
}

Im new to this so can probably be improved upon, but helps me in my transition from Angular

EDIT

See edits below for a better explanation once I had more experience

Thanks to Jay's Comment below, a great idea is also:

render() {
   <View>{this.props.value ? <Text>Yes</Text> : <Text>No</Text>}</View>
}

OR

render() {
   <View>{this.props.value && <Text>Yes</Text>}</View>
}

Similar to some of the other answers but works inline, instead of using the entire render block / function, doesn't require a special component, and you can use an else statement with the ternary operator. Plus items contained within the if statement don't throw an error if their parent object doesn't exist. Ie if if props.value doesn't exist, then props.value.value2 won't throw an error.

See this answer https://stackoverflow.com/a/26152067

EDIT 2:

As per the above link (https://stackoverflow.com/a/26152067) and after a lot more experience developing react apps, the above way it not the best way to do things.

Conditional operators in react are actually very easy to get your head around. There are two ways to do things:

//Show if someItem
{someItem && displayThis}

//Show if else
{someItem ? displayThisIfTrue : displayThisIfFalse}

One caveat you might hit is if "someItem" isn't a boolean expression. If it is say 0 react will print a 0 or react native will give you an error about needing to wrap "0" in a text element. This usually isn't a problem for falsy tests, but will present an issue for truthy tests. For example:

{!someItem && displayThis} //Will work just fine if item is 0 or null or "" etc
{someItem && displayThis} //Will print the value of someItem if its not falsy

My often used trick? double negatives.

{!!someItem && displayThis}

Note that this does not apply to ternary operators (myVar ? true : false) since it implicitly converts the result into a boolean expression.