Estou construindo uma tela de cardápio, atualmente eu tenho um array de itens e preços que o usuário seleciona. Estou exibindo eles na tela normalmente. Porém eu preciso capturar o preço de cada item, e no final eu preciso somar todos os preços para chegar ao valor total. Não consigo aplicar o reduce da forma correta, quando faço isso, ele me mostra a posição 0 (que é o item) e a posição 1 concatenados. Como eu posso usar o reduce? No arquivo hall eu tenho:
const Hall= () => {
const [breakfast, setBreakfast] = useState([]);
const [order, setOrder] = useState([]);
const OptionMenu = () => {
firebase
.firestore()
.collection('menu')
.doc('breakfast')
.get()
.then((snapshot) => {
setBreakfast(Object.entries(snapshot.data()))
});
}
return (
<div>
<Button onClick={(e) => OptionMenu(e.target.value)} children='Café da manhã'/>
</div>
<div>
{breakfast.map((el, index) => <MenuButton onClick={()=>setOrder([...order,el[0],el[1]])} el={el} key={index}/>)}
</div>
<div>
<p>Total:R${order.reduce((acc, cur)=> acc + cur, 0)}</p>
</div>
);
}
O componente MenuButton:
const MenuButton = ({el, index, onClick}) => {
return (
<button onClick={onClick} key={index}>
<p key={el[0]+index}>{el[0]}</p>
<p key={el[1]+index}>R${el[1]},00</p>
</button>
);
}
Foto de como estão armazenados os itens e os preços no firebase e a concatenação na página:
<p>Total:R${order.reduce((acc, cur)=> acc.Valor + cur.Valor, 0)}</p>