React изменение state определённого объетка

Question

Как изменить state только определённых объектов? Код создаёт столько объектов сколько их подаётся из БД с помощью метода map.

{ items.map((item, index) => (
    <div className="col"> <Button onClick={less}>-</Button><a href="#" className="border">{quantity}</a><Button onClick={more}>+</Button> </div>
    ))}

Ниже код React, он содержит логику изменения числа с помощью кнопок + и -

let [quantity, setQuantity] = useState(1)
    function less(){
    setQuantity(quantity = quantity - 1)
  }
  function more(){
    setQuantity(quantity = quantity + 1)
  }

Но проблема в том, что если нажать на кнопку, то событие будет происходить для всех объектов тогда как очевидно нужно чтобы оно происходило только для одного. Как это можно устроить?

Answer 1

Этот кусок можно использовать как отдельный компонент.

<div className="col"> <Button onClick={less}>-</Button><a href="#" className="border">{quantity}</a><Button onClick={more}>+</Button> </div>

export const Column = () => {
    let [quantity, setQuantity] = useState(1)

    const less = () => {
       setQuantity(quantity--)
    }

    const more = () => {
       setQuantity(quantity++)
    }

  return (
     <div className="col">
        <Button onClick={less}>-</Button>
        <a href="#" className="border">{quantity}</a>
        <Button onClick={more}>+</Button> 
     </div>
  )
}

{items.map((item, index) => (
    <Column />
    ))}

БЛОГ НА HUSL

React изменение state определённого объетка

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