How to Render React Component based on condition

// Based on https://github.com/romac/react-if
import React, { PropTypes } from 'react';

function render(props) {
  if (typeof props.children === 'function') {
    return props.children();
  }

  return props.children || null;
}

export function Then(props) {
  return render(props);
}

export function Else(props) {
  return render(props);
}

export function If(props) {
  const { children } = props;
  return (
    [].concat(children).find(c => (c.type !== Else) ^ !props.condition) || null
  );
}

If.propTypes = {
  condition: PropTypes.bool.isRequired,
  children: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.string,
    PropTypes.number,
    PropTypes.object,
  ]),
};
export default If;

import {If} from 'components/RenderIf'
export const Header = (props) => (

   <div>
     <if condition={props.authenticated}>
       <link to="/logout" class="btn btn-outline-danger pull-right">Logout
     </if>
   </div>
  )