A developer writes the following ColorList component:

const ColorList = ({ colors }) => (
  <div className="color-list">
    {colors.length && colors.map(color =>
      <div key={color.id}>{color.title}</div>
    )}
  </div>
)

When colors is an empty array, instead of rendering an empty div, the browser displays a 0. When colors has items, the list renders correctly. What is the root cause of the 0, and what are two ways to fix it?