Как избежать разрыв строк?

Question

[KrotKrotKrotTest]

Мне нужно выполнить проверку на длину props и вывести html. Под получается не очень хороший. Подскажите как можно избежать разрыва строк? Может быть существуют какие-то библиотеки для решения таких проблем

{title.length > 0
              ? "<h2 className=" +
                styles.cardContentTopLineTitle +
                ">" +
                "</h2>"
              : ""}

Comments

[Антон Горецкий]

{
title.length > 0
                    ? <h2 className={styles.cardContentTopLineTitle}></h2>
                    : null
}

Answer 1

[Сергей Соколов]

{title.length > 0 ? <h2 className={styles.cardContentTopLineTitle}></h2> : <></>}

Или в несколько строчек, когда много атрибутов, то в круглых скобках:

{title.length > 0 ? (
  <h2
    className={styles.cardContentTopLineTitle}
    data-name-a={data.names.a}
    data-name-b={data.names.b}
    title="some title"
  >
    Text text
  </h2>
) : (
  <></>
)}