React Visible Component

visible.jsx

// before:
var LoginLink = props => (
  {!props.loggedIn &&
    <a href="#login">Login</a>
  }
);

const Visible = props => props.when && props.children;

// after:
var LoginLink = props => (
  <Visible when={!props.loggedIn}>
    <a href="#login">Login</a>
  </Visible>
);

// The "before" version is terser but "after" looks better when there are many such components