Как исправить return со списком, числом 0 и обработчиком?

Условие

В React написано return <ul>{items.length && items.map((x,i)=><li key={i} onClick={remove(x.id)}>{x.name}</li>)}</ul>. Список может быть пустым, элементы удаляются и переставляются. remove сразу изменяет state. Найдите проблемы.

Ответ

Условие может вывести 0, remove вызывается во время рендера, а индексный key неустойчив при перестановках. Нужны явное условие, callback и key по id.

return <ul>{items.length > 0 && items.map(x =>
  <li key={x.id}>
    <button type="button" onClick={() => remove(x.id)}>{x.name}</button>
  </li>
)}</ul>;

Кнопка даёт управление с клавиатуры, чего голый onClick на li не обеспечивает. Если нужно пустое состояние, его отображают отдельной веткой. Вызов remove во время построения дерева способен вызвать циклические обновления; обёртка откладывает действие до клика.