Better conditional rendering

Hey there! 👋
Are you looking for ways to improve your conditional rendering ?
If so, you're in the right place. In this article, we're going to talk about why you should avoid using ternary operators and switch statements, and how dictionaries can help you write more readable and maintainable code.

First, let's talk about why ternary operators can be a problem.

❌ Why should we avoid ternary operators ?

Ternary operators are a shorthand syntax for performing simple conditional statements in JavaScript. They take the form of condition ? true : false , where the expression before the ? is evaluated, and if it is true, the expression before the : is returned, otherwise the expression after the : is returned.

While they can be useful for simple conditional rendering in React, they can quickly become unwieldy and hard to read when you have multiple conditions to check, or when your rendering logic is more complex.

Here's an example of using a ternary operator for conditional rendering in React:

function MyComponent(props) {
  return (
    <div>
      { props.isLoggedIn ? (
        <p>Welcome, {props.username}!</p>
      ) : (
        <p>Please log in to continue.</p>
      )}
    </div>
  );
}

As you can see, the ternary operator syntax can get pretty messy when you have multiple conditions to check. It's also hard to read, especially if you're not familiar with the syntax.

In such cases, the ternary operator syntax can quickly become hard to read and difficult to maintain.

❌ Why should we avoid switch instructions ?

Another common approach to conditional rendering in React is to use switch statements. A switch statement is a control flow statement that allows us to evaluate a single expression and execute different code based on the result.

Here is an example of using a switch statement for conditional rendering in React:

function MyComponent(props) {
  switch (props.userType) {
    case "admin":
      return (
        <p>Welcome, admin!</p>
      );
    case "user":
      return (
        <p>Welcome, user!</p>
      );
    default:
      return (
        <p>Please log in to continue.</p>
      );
  }
}

In this code, we are using a switch statement to render a different message depending on the value of the userType prop.
While this may be fine for a simple component like this, imagine if we had multiple case statements, or if our rendering logic was more complex.

The switch statement syntax can also become difficult to read and to maintain.

So, what's the solution? 🤔
Well, one way to improve your conditional rendering in React is to use dictionaries.

✅ What are dictionaries and how can they help us ?

In JavaScript, a dictionary (also known as an object) is a collection of key-value pairs. We can use dictionaries to map different values to different rendering functions, which makes our code more readable and easier to maintain.

For example, consider the following code:

const renderMap = {
    admin: () => <p>Welcome, admin!</p>,
    user: () => <p>Welcome, user!</p>
}

function MyComponent(props) {
  const View = renderMap[props.userType]
  return <View />
}

As you can see, the code is more readable and maintainable than the previous examples.

The dictionary allows us to easily add or remove cases without > affecting the rest of the code.

🚀 Conclusion

In conclusion, dictionaries can help us improve our conditional rendering code in React by providing a more readable and maintainable alternative to ternary operators and switch statements.

With dictionaries, we can map a set of conditions to a corresponding set of components and easily add or remove cases as needed.

---

Thank you for reading my article! If you enjoyed it, I would really appreciate it if you could subscribe and like this article.
This will help me create more content that you can enjoy!