不顯示元素
某些情況下我們不希望元件回傳任何值
我們可以讓元件回傳 null 或 false 即可

如果沒有需要顯示訊息，return null 讓畫面上不出現任何東西

function WarningBanner(props) {
  if (!props.warn) {
    
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

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

  // 切換警告顯示狀態
  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }
  
  render() {
    return (
      <div>
      //<WarningBanner/> 的 render 取決於 warn prop 的值。
      //如果 prop 是 false，它就不會 render。
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);