Conditional Rendering in React: A Practical Guide for Beginners

#programming #webdev #react #beginners

Introduction

Sometimes, we want to render some content in our app based on a certain condition. If a certain condition is not met, we don’t want to render the content. We only want to render the content when a certain condition is met. In this case, we use conditional rendering to render content based on certain conditions.

What is Conditional Rendering in React?

Conditional rendering is a technique used to render specific content based on a condition. We use different methods for conditional rendering. Some of these are given below:

Conditional Rendering Using if-else

An easy way to render conditionally is the traditional if-else in JavaScript. In this method, an if-else is placed before the JSX (return statement) in a React component. This if-else executes the condition. Based on that condition, the relevant code block is rendered. For example, if I have a list. I want to render ‘No item found’ if the list is empty. I can do this by:

function App() {
  const skills = [];

  if (skills.length === 0) {
    return <h3>No Items Found</h3>;
  }

  return (
    <>
      <h4>Skills</h4>
      <ul>
        {skills.map((skill) => (
          <li key={skill}>{skill}</li>
        ))}
      </ul>
    </>
  );
}

export default App;

In this example, the skills array is empty. So, skills.length == 0 is true. So, No Items Found is displayed. As I am returning the message here, so the list will not render.

Why if-else is not Used?

if-else is used, but less often for simple UI. This is because we cannot write if-else in JSX. But for complex conditions, we use if-else for conditional rendering.

Using Conditional Operator

Another method for conditional rendering is by using ternary operator i.e., conditional operator. We use this for inline conditional rendering. This is the most commonly used method for conditional rendering. For example, if I want to implement the same functionality using ternary operator, I can implement it by:

function App() {
  const skills = [];

  return (
    <>
      <h4>Skills</h4>
      {skills.length === 0 ? <h3>No Items Found</h3> : null}
      <ul>
        {skills.map((skill) => (
          <li key={skill}>{skill}</li>
        ))}
      </ul>
    </>
  );
}

export default App;

Conditional Rendering Using Logical Operators

We also use Logical Operators for conditional rendering. We use AND && operator for conditional rendering. AND operator only returns true if both the values are true. Otherwise, it returns false. Let’s consider the example:

In this example, if the value (condition) on the left side of AND operator is true, then it will go to the right-side value and renders it. But if the value on left side is false, it will not move to the right-side value. The above example using Conditional Operator is:

function App() {
  const skills = [];

  return (
    <>
      <h4>Skills</h4>
      {skills.length == 0 && <h3>No Items Found</h3>}
      <ul>
        {skills.map((skill) => (
          <li>{skill}</li>
        ))}
      </ul>
    </>
  );
}

export default App;

Note: Be careful when the left-side value can be 0, because React will render 0 on the screen.

Difference between CSS hide/show and Conditional Rendering

When we use CSS to hide or display an element based on a condition or event, this makes the app more complex. Because we are rendering unnecessary elements and then hiding them. This makes DOM more complex. React Conditional Rendering solves this problem. We’ve already seen how Conditional Rendering works.

Advantages of Conditional Rendering

It enhances user experience.
It reduces unnecessary rendering.
It makes our app more interactive and dynamic.

Best Practices for Conditional Rendering

Keep JSX readable
Extract complex logic
Prefer clarity over clever code
Use meaningful variable names

Conclusion

In this beginner guide, we have covered what Conditional Rendering is, why we use it, its different methods, its advantages and best practices. If this seems complicated at first, don’t worry. That’s natural. Practice regularly and you’ll master it. Practice makes you better over time.