[React] Inline If with Logical && Operator / Preventing Component from Rendering

import React from 'react'

function Mailbox (props) {
  const unreadMessage = props.unreadMessage
  return (
    <div>
      <h1>Hello</h1>
      {
        unreadMessage.length > 0 &&
        <h2>You have {unreadMessage.length} unread message</h2>
      }
    </div>
  )
}


export default Mailbox

import React from 'react';
import Mailbox from './Mailbox'
const messages = ['React', 'Re: React', 'Re:Re: React']

function App() {
  return (
    <div className="App">
        <Mailbox unreadMessage={messages}></Mailbox>
    </div>
  );
}

export default App;

GitHub連結

import React from 'react';

function WarningBanner (props) {
  if (!props.warn) return null
  return (
    <div className="warning">Warning</div>
  )
}

export default WarningBanner

import React, { Component } from 'react'
import WarningBanner from "./WarningBanner";

export class Page extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showWarning: true
    }
    this.handleToggleClick = this.handleToggleClick.bind(this)
  }
  handleToggleClick() {
    this.setState(state => ({ showWarning: !state.showWarning }))
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning}></WarningBanner>
        <button onClick={this.handleToggleClick}>
          { this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    )
  }
}

export default Page

import React from 'react';
import Page from './Page'

function App() {
  return (
    <div className="App">
        <Page></Page>
    </div>
  );
}

export default App;

GitHub連結