🐸 Библиотека фронтендера

#pixel_pause

😱 Баг, который пропускают даже опытные разработчики

Казалось бы, простой условный рендеринг. Но вот вам сюрприз.

Когда items пустой массив, items.length равен 0. В JavaScript 0 — это falsy значение, поэтому выражение 0 && <ul> вернет 0.

React рендерит числа, поэтому на экране появится цифра 0!

✅ Правильный вариант:

function ProductList({ items }) {
  return (
    <div>
      <h2>Товары</h2>
      {items.length > 0 && <ul>
        {items.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>}
    </div>
  );
}

Или еще лучше:

{!!items.length && <ul>...</ul>}

Или тернарный оператор:

{items.length ? <ul>...</ul> : null}


💡 Почему так происходит:

Оператор && возвращает первое falsy значение или последнее truthy:

0 && <Component /> → вернет 0 (React рендерит!)

false && <Component /> → вернет false (React не рендерит)

true && <Component /> → вернет <Component />

React не рендерит: false, null, undefined, true

React рендерит: числа (0, 1, -1), строки, компоненты

❗️ Оператор && используйте только с boolean значениями, а не с числами.

🐸 Библиотека фронтендера

#hotfix #react