Inline If-Else with Logical && Operator

index.html

<div id="root"></div>

inline-if-else-with-logical-operator.markdown

Inline If-Else with Logical && Operator

A Pen by kenzhaoyihui on CodePen.

License.

script.babel

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

class Page extends React.Component {
  constructor(props){
    super(props);
    this.state = {showWarning: true};
    this.handClick = this.handClick.bind(this);
  }
  
  handClick() {
    this.setState(preState => ({
      showWarning : !preState.showWarning
    }));
  }
  
  render () {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handClick}>
          {this.state.showWarning ? 'Hide': "Show"}
        </button>
        </div>
    );
  }
}

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

scripts

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

style.css

* {
  font-family: sans-serif;
  margin: 0;
  
}
button {
  height: 40px;
  width: 200px;
}

.warning {
  background-color: red;
  text-align: center;
  width: 100%;
  padding: 10px;
  font-size: 50px;
  color: orange;