filter() before map()

React offers several ways to hide values when rendering. In particular, when iterating over an array, is it tempting to manipulate this visibility in the map() function. A function that returns false or null will not render the element. You can write code like this:

const Component = ({ links }) => (
  <div className="sidebar">
    {links.map((link, i) =>
      link.hide ? null : (
        <Link key={i} href={link.href}>
          {link.text}
        </Link>
      )
    )}
  </div>
)

Above, null values are not rendered. However, you should filter out those values instead. As a result, the code is more readable and declarative:

const Component = ({ links }) => (
  <div className="sidebar">
    {links
      .filter(({ hide }) => !hide) // When `hide` is `true`, filter it out
      .map((link, i) => (
        <Link key={i} href={link.href}>
          {link.text}
        </Link>
      ))}
  </div>
)