Simple functional stateless component to make component rendering declarative and avoid JSX evaluation magic.

Visibility.js

import { Children, PropTypes } from 'react';

const Visibility = ({ visible, children }) => (
  visible ? Children.only(children) : null
);

Visibility.defaultProps = {
  visible: true,
};

Visibility.propTypes = {
  visible: PropTypes.bool,
  children: PropTypes.element.isRequired,
};

export default Visibility;