Home / Questions / 278440
Accepted
ricardo leiva sikic
Asked: 2020-07-12 15:05:01 +0800 CST 2020-07-12 15:05:01 +0800 CST

Show total of a sum in React

  • 772

I have the following query. I am making a simple app in which products are added and these (which are objects) have a name and a price. What I am trying to do is that where I render the variable, the total of the sum appears when I add a product, instead what appears to me is: (adding with 1) 123..

It is effective that the value that appears with the click event of adding is added to me, but it shows me not a total but the history of the sum.

let i = 0;

let total = this.state.list.map((x, i) => {
 let val = parseInt(x.price);
 i += val;
 return i;   
 console.log('suma ', i); 
})

return(
  <Container>
    <Row>
      <Col sm='6'>
        <Form>
          <FormGroup>
            <Label>Producto</Label>
            <Input type='text' name='product' onChange={ e => this.getData(e) } placeholder='añade un item'></Input>
          </FormGroup>
          <FormGroup>
            <Label>Precio</Label>
            <Input type='text' name='price' onChange={ e => this.getData(e) } placeholder='añade un item'></Input>
          </FormGroup>
          <Button className='btn btn-success' onClick={ e => this.submitData(e) } >Añadir</Button>
        </Form>
      </Col>
      <Col sm='6' className='mt-4 border' style={{ overflowY: 'scroll', position: 'relative', height: '200px'}}>
      <h4>Productos {listado.length}</h4>
      <TransitionGroup>
      {listado}
      </TransitionGroup>
      </Col>
    </Row>
    <Row>
      <Container className='mt-4'>
       {total} **aqui es donde me aparece el 123..en vez del total**
      </Container>
    </Row>
  </Container>

);
reactjs

1 Answers

  1. Best Answer

    Errors I see in your code:

    • You have i(which I assume is where you want to accumulate your summation) defined 2 times, once with letand once within your anonymous map.
    • In your definition of (x, i)for map, according to the documentation , a xis being assigned the current value of your list and for ithe index, which doesn't agree with what you're doing later in your function logic.
    • What it mapreturns is a list with each of the values ​​that you have returned within the callback function that you pass to map. Then, since you're returning the value of i(which is the index of your array), you're simply assigning total to an array [1, 2, 3]. What you really need for your problem is reduce, where you wouldn't even need an accumulator variable.
    • Somewhat minor, but you console.lognever get hit, since you make a returnbefore it even gets to that line.

    With these indications it should be enough for you to see for yourself how to solve your problem. Cheers

    • 3