В проектах часто встречается рендер через логический оператор И: {condition && <div>Component</div>} Если condition истинно, то отрендерится компонент. Если же условие ложно, то мы ничего не увидим. Причину этого мы разбирали в этом посте(клац). А что если мы хотим вывести компонент при одном из условий? Можно написать так: {condition || secondCondition && <div>Component</div>} Но тут есть какой-то подвох... Он не всегда бросается в глаза. Из-за приоритета операторов И(&&) выполняется раньше, чем ИЛИ(||). Поэтому этот код на самом деле работает так: {condition || (secondCondition && <div>Component</div>)} В результате компонент появится только тогда, когда condition ложно, а secondCondition истинно. Чтобы логика работала правильно, достаточно добавить группировку: {(condition || secondCondition) && <div>Component</div>} Теперь компонент отрендерится, если хотя бы одно условие истинно. Но на самом деле можно упростить ещё больше. Я уже писал про условный рендер в этом посте(тык). Он выглядит понятнее и не заставляет задумываться о приоритетах: {condition || secondCondition ? <div>Component</div> : null} Так код читается сразу и не заставляет думать лишний раз. #BestPractices #JavaScript