Sometimes, we want to use if statements within a map callback in React.

In this article, we’ll look at how to use if statements within a map callback in React.

How to use if statements within a map callback in React?

To use if statements within a map callback in React, we can put the if statements inside the map callback and return the items we want according to the given condition.

For instance, we write:

import React from "react";

const nums = [1, 2, 3, 4, 5, 6];

export default function App() {
  return (
    <>
      {nums.map((n) => {
        if (n % 2 === 0) {
          return (
            <p key={n} style={{ color: "green" }}>
              {n}
            </p>
          );
        } else {
          return (
            <p key={n} style={{ color: "red" }}>
              {n}
            </p>
          );
        }
      })}
    </>
  );
}

We call nums.map with a callback that checks if n is even with n % 2 === 0.

If it is, we return a p element with green text.

Otherwise, we return a p element with red text.

We set the key element of the component we return to a unique value so React can keep track of the items.

Conclusion

To use if statements within a map callback in React, we can put the if statements inside the map callback and return the items we want according to the given condition.