Getting Total value from Array inputted by user

Question

In my react app i have some input box for user to put value in and when they press the tambah button the value will be displayed in a table. I am trying to make a total row on the bottom of the table to count the sum of the value from jumlah and make the value displayed get updated every time new data get inputted.

Below are my code

import React, { Component } from 'react'; 
import './Bootstrap/css/bootstrap.min.css';

class App extends Component { 
  constructor(){ 
    super(); 
 
    this.state = { 
      mahasiswa : [], 
      tgl : null,
      nama : null, 
      nilai : null
    }   
  } 
 
  setValueState(event){ 
    this.setState({ 
      [event.target.name] : event.target.value 
    }) 
  }

  addData(){ 
    var data_tmp = this.state.mahasiswa; 
    
    data_tmp.push({nim : this.state.tgl, nama : this.state.nama, nilai : this.state.nilai}); 
    this.setState({ 
      mahasiswa : data_tmp 
    }) 
  } 
   
  render() { 
    return ( 
      
      <div className="container"> 
       <h2><b>Daftar Pengeluaran</b></h2>
        <div className="form-container"> 
          <div className="form-group"> 
            <label>Waktu:</label> 
            <input type="text" name="tgl" value={this.state.tgl} onChange={this.setValueState.bind(this)} className="form-control" /> 
          </div> 
          <div className="form-group"> 
            <label>Deskripsi:</label> 
            <input type="text" name="nama" value={this.state.nama} onChange={this.setValueState.bind(this)} className="form-control" /> 
          </div> 
          <div className="form-group"> 
            <label>Jumlah:</label> 
            <input type="number" name="nilai" value={this.state.nilai} onChange={this.setValueState.bind(this)} className="form-control" /> 
          </div> 
          <br />
          <button onClick={this.addData.bind(this)} type="button" className="btn btn-primary">Tambah</button> 
          
        </div> 
        
        <br /> 
                <table className="table"> 
                
                <thead>      
                  <tr><th>No.</th><th>Waktu</th><th>Deskripsi</th><th>Jumlah</th></tr> 
                </thead> 
                      <tbody> 
                              {this.state.mahasiswa.map((mhs, index)=>( 
                                <tr key={index}> 
                                  <td>{index+1}</td><td>{mhs.tgl}</td> 
                                  <td>{mhs.nama}</td><td>{mhs.nilai}</td>
                                </tr> 
                              ))} 
                      </tbody> 
                      <tr>Total :</tr>
                </table>
        </div> 
    ); 
    } 
  };
  
export default App;

Which values are you trying to combine to work out your total? — DBS
– DBS, Commented Nov 29, 2021 at 12:09

Chinmay Dey · Accepted Answer · 2021-11-29 14:05:03Z

1

import { toDate } from 'date-fns';
import React, { Component } from 'react'; 
import './Bootstrap/css/bootstrap.min.css';

class App extends Component { 
  constructor(){ 
    super(); 
 
    this.state = { 
      mahasiswa : [], 
      tgl : null,
      nama : null, 
      nilai : null,
      nilaiArray: []
    }   
  } 
 
  setValueState(event){ 
    var value = event.target.value
    this.setState({ 
      [event.target.name] : value
    }) 
    var nilaiArrayTmp = this.state.nilaiArray;
    nilaiArrayTmp.push(value?parseFloat(value).toFixed(2):0)
    this.setState({
      nilaiArray: nilaiArrayTmp
    })
  }

  addData(){ 
    var data_tmp = this.state.mahasiswa;     
    data_tmp.push({nim : this.state.tgl, nama : this.state.nama, nilai : this.state.nilai}); 
    this.setState({ 
      mahasiswa : data_tmp 
    }) 
  } 
   
  render() { 
    return (       
        <div className="container"> 
            <h2><b>Daftar Pengeluaran</b></h2>
            <div className="form-container"> 
                <div className="form-group"> 
                    <label>Waktu:</label> 
                    <input type="text" name="tgl" value={this.state.tgl} onChange={this.setValueState.bind(this)} className="form-control" /> 
                </div> 
                <div className="form-group"> 
                    <label>Deskripsi:</label> 
                    <input type="text" name="nama" value={this.state.nama} onChange={this.setValueState.bind(this)} className="form-control" /> 
                </div> 
                <div className="form-group"> 
                    <label>Jumlah:</label> 
                    <input type="number" name="nilai" value={this.state.nilai} onChange={this.setValueState.bind(this)} className="form-control" /> 
                </div> 
                <br />
                <button onClick={this.addData.bind(this)} type="button" className="btn btn-primary">Tambah</button> 
            </div>
            <br /> 
            <table className="table"> 
                <thead>      
                    <tr>
                        <th>No.</th>
                        <th>Waktu</th>
                        <th>Deskripsi</th>
                        <th>Jumlah</th>
                    </tr> 
                </thead> 
                <tbody> 
                    {this.state.mahasiswa.map((mhs, index)=>( 
                    <tr key={index}> 
                        <td>{index+1}</td>
                        <td>{mhs.tgl}</td> 
                        <td>{mhs.nama}</td>
                        <td>{mhs.nilai}</td>
                    </tr> 
                    ))} 
                    {nilaiArray.length > 0 &&
                    <tr>
                        <td colSpan="3">Total:</td>
                        <td>
                          {nilaiArray.reduce(add, 0)}
                        </td>
                    </tr>
                    }
                </tbody> 
            </table>
        </div> 
    ); 
    } 
  };
  
export default App;

edited Nov 29, 2021 at 14:05

answered Nov 29, 2021 at 12:15

Chinmay Dey

1424 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Suriadi Chandra Over a year ago

From what i understand the line added was to parse the value from all 3 input to float value and count it all right ? but i only wanted to count the value of nilai from the array

Chinmay Dey Over a year ago

Please check now the code.

Suriadi Chandra Over a year ago

From the edited code i am getting 'nilaiArray' is not defined though i'm not quite sure why

Chinmay Dey Over a year ago

nilaiArray is decalired inside constructor(){ super(); this.state = { mahasiswa : [], tgl : null, nama : null, nilai : null, nilaiArray: [] } }

Chinmay Dey Over a year ago

Are you sure you add nilaiArray inside your state variables?

Collectives™ on Stack Overflow

Getting Total value from Array inputted by user

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related