Conditional Rendering in React

What is Conditional Rendering?

In React, once we have successfully compiled our components, as well as the subsequent elements we want to display on the webpage, we can add nifty effects onto those objects to determine if/what details we want to show.

To enact conditional rendering on a piece of information, we can use one of two methods: an "if" statement or a "ternary" operator.

By using these, we can swiftly change the state of our application, and in turn, affect the what is displayed on the page. Having laid the groundwork, let's dive right in.

Conditional Rendering with "if"

For the purposes of this blog post, let's say we are showing a list of flowers.

// db.json

{
  "flowers": [
    {
      "id": 1,
      "name": "Rose",
      "inBloom": true,
    },
    {
      "id": 2,
      "name": "Orchid",
      "inBloom": false,
    }
  ]
}

For each flower in our database, we are provided a boolean value to determine if that flower is in bloom or not.

Since not every flower will be in bloom at the same time, we can conditionally render that information on the webpage using an "if".

function FlowerCard({flower}) {

  function inBloomFlower(flower){
     if(flower.inBloom === true){
       return "IN BLOOM :)"
     }
       return "NOT IN BLOOM :("
  }

  return (
    <div className="card">
      <h2>{flower.name}</h2>
      <img src={flower.image} alt={flower.name} />
      { inBloomFlower }
    </div>
  )
}

export default FlowerCard

By putting an "if" statement within a function outside of the return, we tell the program to read the value of each flower's inBloom key in the database. Based on what the program reads, it will determine what to insert into the rendered page.

Therefore, on our webpage we will see the "rose" labeled as in bloom, and the orchid as not being in bloom.

Conditional Rendering with "Ternary" Operator

The other way we could achieve the same result is using the ternary operator. In this method, we can save ourselves the hassle of writing a new function outside of the return and can instead write everything we need in line.

function FlowerCard({flower}) {

  return (
    <div className="card">
      <h2>{flower.name}</h2>
      <img src={flower.image} alt={flower.name} />
      { flower.inBloom ? 
          <h3> IN BLOOM :) </h3> 
        : 
          <h3> NOT IN BLOOM :( </h3> 
      }
    </div>
  )
}

export default FlowerCard

In this example, we turned what was previously an "if" statement into a "ternary". We're telling the program to read that same value of the inBloom key in the database. If it reads that key as 'true' is will return the value that precedes the colon, and if it reads it as false, it will return the value that succeeds it.

I hope that this blog has helped the reader better understand the power of conditional rendering in react as well as the efficiency with which it can be enacted.