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

Question

<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 и ошибка , поэтому так, но выглядит ужасно.

Answer 1

Я бы на Вашем месте вынес бы эти вычисления с JSX. А там где key дал что-то вроде id или уникального значения. Есть предположение, что quantity - может повторится. Для того, чтобы сократить код можно использовать Optional chaining.

const cartQuantity = cart.find(item => item.product._id === product._id)?.quantity || '';

return (
    <div className="catalog-mobile__counter" key={cartQuantity}>
        <div className="catalog-mobile__minus"></div>
        <input type="text" defaultValue={cartQuantity} />
        <div className="catalog-mobile__plus"></div>
    </div>
)

В случае, если у Вас ошибка при работе с babel, установите следующий компонент [Подробнее]:

  npm install --save-dev @babel/plugin-proposal-optional-chaining

БЛОГ НА HUSL

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

Ответы (1 шт):