DEV Community

Ayush
Ayush

Posted on

Conditional Rendering in ReactJS

One of the nicest thing in React is we can render components and elements conditionally.

Single Page applications are dynamic and event driven in nature. To make this possible
React has one feature called conditional rendering.

Wait what do you mean by rendering ?

By Rendering we mean to say that updating the page view based on changes in its state or props.

React components need to often display different user interface based on different conditions.

This concept is often applied in different situations:

  • Rendering external data from an API
  • Showing or hiding elements
  • Toggling application feature
  • implementing permission levels
  • Handling authentication and authorization

Lets see some ways of implementing conditional rendering in ReactJS
We have have a PackingList component rendering several Items, which can be marked as packed or not

Method 1

In Some situations we may not want to render anything at all. In that case we can return null

if (condition){
    return <div>{name}<div>;
}
return null;
Enter fullscreen mode Exit fullscreen mode

If condition is true, it will return JSX to render, or else it returns null
Its not common to return null from component.

// App.jsx
function Item({ name, isPacked }) {
  if (isPacked) {
    return null;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}
Enter fullscreen mode Exit fullscreen mode

Method 2 using ternary operator ?

return (
    <div>
      {condition ? name + '' : name}
    </div> 
)
Enter fullscreen mode Exit fullscreen mode

In the above code if condition is true (?)
then render name + ' ✔', or else ( : ) render name

// App.jsx
function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ''}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}
Enter fullscreen mode Exit fullscreen mode

Method 3 using Logical AND operator ( && )

return (
    <div>
    {name} {condition && ''} 
    </div>
)
Enter fullscreen mode Exit fullscreen mode

JavaScript && expression returns the value of its right side
if the lift side (condition) is true. But if the condition on left side is false
the whole expression becomes false, and dosen't render anything in its place.

We shouldn't put numbers on the left
side of && .JavaScript converts the left side to a boolean automatically. However, if the left side is 0, then the whole expression gets that value (0), and React will happily render 0 rather than nothing.

// App.jsx
function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && ''}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}
Enter fullscreen mode Exit fullscreen mode

Conditionally assigning JSX to a variable

The above 3 methods were shortcuts if theat becomes tricky or hard to use,
we can use if statement and a variable. You can
reassign variables defined with let

let itemContent=name;
Enter fullscreen mode Exit fullscreen mode

Use an if statement to reassign a JSX expression to itemContent if
isPacked is true

if (isPacked) {
  itemContent = name + "";
}
Enter fullscreen mode Exit fullscreen mode

Curly braces open the “window into JavaScript”.
Embed the variable with curly braces in the returned JSX tree,

<li className="item">
  {itemContent}
</li>
Enter fullscreen mode Exit fullscreen mode

This style is the most verbose, but it’s also the most flexible. Here it is in action:

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = (
      <del>
        {name + ""}
      </del>
    );
  }
  return (
    <li className="item">
      {itemContent}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}
Enter fullscreen mode Exit fullscreen mode

Happy Coding 😎

Top comments (0)