JSX ломается не в синтаксисе, а в том, как вы его читаете и собираете

JSX ломается не в синтаксисе, а в том, как вы его читаете и собираете

JSX — это не HTML в маске, а форма записи вызовов функций. Поэтому ошибки чаще всего не в скобках, а в логике: компоненту передали не тот тип пропса, забыли key в списке, или засунули в выражение то, что должно жить вне рендера.

Три места, где чаще всего стреляют себе в ногу:
— условный рендер с «ложными» значениями: 0, пустая строка, null ведут себя по-разному;
— список без стабильного key: React теряет связь между элементами и состоянием;
— inline-объекты и функции в пропсах: пересоздание на каждом рендере ломает мемоизацию и усложняет отладку.

Отдельно проверьте границы между JSX и логикой. Если внутри разметки больше двух тернарников, пора выносить условия в переменные или в отдельный компонент. Если JSX начинает описывать сценарий, а не интерфейс, он быстро превращается в нечитаемый конструктор.

Хорошее правило: в JSX оставляйте только то, что должно быть видно глазами, а всю ветвистую логику держите рядом, но не внутри. Тогда код легче ревьюить, тестировать и менять без страха сломать соседний блок.