Eu quero atualizar o meu objeto através de uma função de incremento e fazer com que apareça em tela. Eu consegui atualizar o objeto, porém, ele só atualiza no meu consolo.log, na parte visual da aplicação não está aparecendo. Como faço para que atualize no HTML também?
Estou utilizando ReactJS com Styled-Components
const [ coffeeList, setCoffeeList ] = useState<CoffeeType[]>([
{
id: 1,
img_item: expresso,
type: ['TRADICIONAL'],
title: 'Expresso Tradicional',
description: 'O tradicional café feito com água quente e grãos moídos',
quantity: 0,
price: 9.99,
},
{
id: 2,
img_item: Americano,
type: ['TRADICIONAL'],
title: 'Expresso Americano',
description: 'Expresso diluído, menos intenso que o tradicional',
quantity: 0,
price: 9.99,
},)
function handleIncrementItem(id: number) {
coffeeList.map(coffee => {
if(coffee.id === id) {
return {...coffee, quantity: coffee.quantity += 1}
} else {
return coffee
}
})
}
{coffeeList.map((coffee) => {
return (
<CoffeeItem key={coffee.id}>
<img src={coffee.img_item} alt="Imagem de café" />
<strong> {coffee.title} </strong>
<Subtitle>
{coffee.type.map((item) => {
return <b key={Math.random()}> {item} </b>
})}
</Subtitle>
<p> {coffee.description} </p>
<div>
<span> {coffee.price} </span>
<ContdownOfItems>
<button type="button" onClick={() => handleIncrementItem(coffee.id)}>
<Minus size={24}/>
</button>
{coffee.quantity}
<button type="button">
<Plus size={24}/>
</button>
</ContdownOfItems>
<button type="submit">
<ShoppingCart weight="fill" size={24} />{' '}
</button>
</div>
</CoffeeItem>
)
})}