How to render conditional items in React?

Comparing Three Approaches to Render conditional items in React

When it comes to rendering conditional in a React, there are multiple approaches you can take. In this article, we will explore three different methods and identify the best approach among them. Suppose we have an array of objects and want to condition render items in three ways.

const data = [
  {
    id: 1,
    name: "john",
  },
  {
    id: 2,
    name: "jack",
  },
  {
    id: 3,
    name: "mike",
  },
  {
    id: 4,
    name: "stephen",
  },
];

if else Statements
In the first approach, items are rendered using a series of conditional statements. Each item in the data array is checked for a specific name and mapped to its corresponding emoji. While this method works, it can become hard to maintain and extend as the number of name and conditions increase.

const result = data.map((item) => {
  if (item.name === "john") {
    return "😀";
  } else if (item.name === "jack") {
    return "🕵️‍";
  } else if (item.name === "mike") {
    return "🤶";
  } else if (item.name === "stephen") {
    return "🎅";
  }
});

Switch Statements
The second approach utilizes a switch statement to map names to emojis. This method provides a cleaner and more readable syntax compared to the first approach. Switch statements are especially useful when there are multiple cases to handle. However, as the number of emojis grows, the switch statement can become lengthy and harder to manage.

const result = data.map((item) => {
  switch (item.name) {
    case "john":
      return "😀";
    case "jack":
      return "🕵️‍";
    case "mike":
      return "🤶";
    case "stephen":
      return "🎅";
  }
});

Object Mapping
The third and best approach involves creating an object mapping the names to emojis. Each name is associated with its respective emoji in the nameMap object. This approach is concise, scalable, and easy to maintain. By utilizing the object mapping technique, we eliminate the need for lengthy conditional or switch statements, resulting in cleaner code.

const nameMap = {
  john: "😀",
  jack: "🕵️‍",
  mike: "🤶",
  stephen: "🎅",
};

const result = data.map((item) => nameMap[item.name]);

The benefits of the third approach include:

• Simplicity: The code is cleaner and easier to read, understand, and maintain.
• Scalability: Adding or modifying emojis is straightforward as we only need to update the nameMap object.
• Performance: Object lookups in JavaScript are generally faster compared to multiple conditionals or switch statements.

The nameMap object provides a direct mapping between names and emojis, allowing for efficient retrieval of emojis based on the item's name. This approach promotes code reusability and enhances the overall maintainability of the component.

In conclusion, the third approach, utilizing object mapping, is the recommended method for rendering emojis in React components. It offers simplicity, scalability, and improved performance compared to conditional statements and switch statements. By adopting this approach, developers can write clean, maintainable code that efficiently handles emoji rendering in their applications.