basics - preventing component from rendering example ( hint: use null)

App.js

import React, { Component } from "react";

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      warn: true
    };
    this.handleToggle = this.handleToggle.bind(this);
  }

  handleToggle() {
    this.setState(prevState => ({ warn: !prevState.warn }));
  }
  render() {
    const { warn } = this.state;
    return (
      <div>
        <WarningBanner warn={warn} />
        <button onClick={this.handleToggle}>{warn ? "hide" : "show"}</button>
      </div>
    );
  }
}

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  } else {
    return <h3>Warning</h3>;
  }
}

export default App;