-1

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:

itens no firebase página do hall

2

1 Resposta 1

1

Nesta linha (que vou chamar de linha A.1),

{breakfast.map((el, index) => <MenuButton onClick={()=>setOrder([...order,el[0],el[1]])} el={el} key={index}/>)}

você está separando o nome do produto de seu valor; no final da operação, o conteúdo de order será (linha A.2):

['Café americano', 5]

Quando chegar na hora de calcular o total com reduce, você terá uma string e um número dentro de order, por isso, provavelmente, você deve estar obtendo NaN ou uma string concatenada com o 0 inicial do acc:

<p>Total:R${order.reduce((acc, cur)=> acc + cur, 0)}</p>  

Veja abaixo o código com algumas correções e adaptações para o Stack Overflow:

const {useState} = React;

function MenuButton(props) {
  return (
    <button onClick={props.onClick} key={props.key}>
      <p key={props.el[0]+props.key}>{props.el[0]}</p>
      <p key={props.el[1]+props.key}>R${props.el[1]},00</p>
    </button>
  );
}

function Hall() {
  const [order, setOrder] = useState([]);

  const breakfast = [
    ['Café americano',5]
  , ['Café com leite',7]
  , ['Misto quente', 10]
  , ['Suco natural', 7]
  ];

  return (
    <div>
      <div>
        {breakfast.map((el, index) => <MenuButton 
          onClick={() => setOrder(order.concat({titulo:el[0], preco:el[1]}))}
          el={el}
          key={index}
        />)}
      </div>
      <div>
        Total: R$ {order.reduce((acc,x) => acc + x.preco, 0)}
      </div>
    </div>
  );
}

ReactDOM.render(<Hall />, document.getElementById('content'));
<div id="content"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

2
  • 1
    Funcionou!! Obrigada Marcelo :) Commented 9/08/2020 às 19:10
  • Poderia marcar esta resposta como a melhor resposta? Obrigado. Commented 9/08/2020 às 20:12

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .