How it is possible to make more beautiful formatting?

Question

React

hello i have this code

<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>

How can I refactor this code. There is a conditional check here, because not all items produce a result, and for which some undefined and an error, so it is, but it looks terrible.

Answer 1

The code looks like it should have been like this:

<>
  {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>
  ))}
</>

As I understand it, you can change the quantity of a product, so even pre-calculated relationships are not very good.