Conditional Rendering

Conditional rendering is rendering elements that may or may not be displayed on a web page depending on certain conditions or events. These conditionals are decision paths in your code, something like an if statement. We use conditional rendering to render elements when a particular decision path is hit. A good example of conditional rendering is a credit card information form that only appears when you choose credit card as your payment option. Conditional rendering allows us to use standard JavaScript conditional statements (such as if and else) to dynamically choose which components to display in our application and which ones to hide.

For example, let's look at this example:

import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
 return (<div className="App">
    <button>Click me to show the rest!</button>
   &...