Условный рендеринг для функциональных компонент

example.js

function Mailbox(props) {
    const unreadMessages = props.unreadMessages;
    return (
      <div>
        <h1>Здравствуйте!</h1>
        {renderIf(unreadMessages.length > 0, (
            <h2>
                У вас {unreadMessages.length} непрочитанных сообщений.
            </h2>
        )}
      </div>
    );
  }
  
  const messages = ['React', 'Re: React', 'Re:Re: React'];
  ReactDOM.render(
    <Mailbox unreadMessages={messages} />,
    document.getElementById('root')
  );

renderIf.ts

import {ReactElement} from 'react';

/**
 * Условный рендеринг для функциональных компонент.
 
 * В функциональных компонентах не прокатывает паттерн условного рендеринга с применением логического оператора &&,
 * потому что в типизации описано, что функциональный компонент может возвращать ReactElement или null,
 * а логические значения возвращать нельзя.
 * @link https://ru.reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
 
 * @param condition
 * @param children
 */
export default function renderIf(condition: boolean | Array<any>, children: ReactElement): ReactElement | null {
	return (Array.isArray(condition) ? condition.length > 0 : condition) ? children : null;
}