Как можно сделать более красивое форматирование?

Question

[DeniSidorenko]

Привет есть такой код

<div className="catalog-mobile__counter" key={cart.find(item => item.product._id === product._id) ? cart.find(item => item.product._id === product._id).quantity : "" }>
              <div className="catalog-mobile__minus"></div>
              <input type="text" defaultValue={cart.find(item => item.product._id === product._id) ? cart.find(item => item.product._id === product._id).quantity : "" } />
              <div className="catalog-mobile__plus"></div>
          </div>

Как можно сделать рефактор данного кода. Тут условная проврека ибо не все пункты выдают результат и за чего некоторые undefined и ошибка , поэтому так, но выглядит ужасно.

Comments

[alex4answ]

1. Зачем вы выполняете поиск 4 раза ? выполните 1 раз - результат в переменную
2. Строки слишком длинные сделайте перенос.
3. пустые теги выглядят так

Answer 1

[Александр]

Код выглядит так, как будто должны было быть так:

<>
	{cart.map(item => (
		<div className="catalog-mobile__counter" key={item.product._id}>
			<button className="catalog-mobile__minus"></button>
			<input type="text" defaultValue={item.quantity || ''} />
			<button className="catalog-mobile__plus"></button>
		</div>
	))}
</>

Я так понимаю, можно менять количество у товара, поэтому даже заранее высчитанные связи не очень.