JSFiddle - React, Tailwind, and code Playground

by 2dubbing

HTML

<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Babel + JSX

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {/* 
      	unreadMessages length value is zero(0).
				zero(0) is falsy from javascript.
				However, zero is output as the rendered result.
      */}  
      {unreadMessages.length &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = []; // empty list
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);