basics - conditional rendering with inline logical && operator example

App.js

import React from "react";

const messages = ["react", "angular", "javascript"];

function App() {
  return <MailBox unreadMessages={messages} />;
}

function MailBox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      {unreadMessages.length > 0 && (
        <h2>you have {unreadMessages.length} unread messages</h2>
      )}
    </div>
  );
}

export default App;