Отображение с помощью &&

Часть раздела Основы путешествия по React на Coddy. Урок 34 из 42.

Часто else не нужен: нужно лишь, чтобы что-то появлялось при выполнении условия. Приём с && позволяет показать элемент или ничего не показывать:

{unread > 0 && <span>You have {unread} new messages</span>}

Как это работает: && возвращает правую часть, если левая истинна, и React отображает её. Если левая часть ложна, ничего не отображается. Если слева булево значение, это тернарный оператор без части : null:

{cond ? <X /> : null}   // то же самое, что
{cond && <X />}

Поэтому в примере проверяется unread > 0. Если использовать {unread && <span>...</span>}, когда unread равно 0, && возвращает 0, и React отображает его на странице.

Задание

Легко

Отображай значок непрочитанных сообщений во входящих, только если есть что прочитать. Компонент определяет unread.

Используя &&, отображай <span> с id="badge" и текстом 3 new messages (сформируй число из переменной!), но только когда unread больше 0.

Попробуйте сами

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>