React - Loop inputs and get sum value

Question

I am attempting to in React JS to get the sum of a group inputs, and put the sum of their total values in a div tag.

I am trying to run this event whenever a user types in any of the inputs

The problem is I am sure React has a proper way to do this!

This is my feeble attempt (please go easy - I am new to coding :)

HTML

<input type="number" id="comp1" name="comp1" onChange={this.handleTotal} />
<input type="number" id="comp2" name="comp2" onChange={this.handleTotal} />
<input type="number" id="comp3" name="comp3" onChange={this.handleTotal} />
<input type="number" id="comp4" name="comp4" onChange={this.handleTotal} />
<input type="number" id="comp5" name="comp5" onChange={this.handleTotal} />
<input type="number" id="comp6" name="comp6" onChange={this.handleTotal} />
<div id=total></div>

JS

handleTotal = e => {  
    // Grab all inputs that start with ID 'comp'
    let inputs = document.querySelectorAll('[id^="comp"]');

    // Trying to loop through the values and get the sum of all inputs
    for (var i = 0; i < inputs.length; i++) {
        let totalVal = inputs[i].value
        console.log(totalVal);
    }

    //Trying to grab total values of all inputs and put in element 
    document.getElementById('total').innerHTML = totalVal;
}

dw_ · Accepted Answer · 2020-03-04 17:33:53Z

At the moment you are not utilizing any of the React's data binding.

Best to use React's state to hold the values of the total and all the comp inputs.

I've also used the .reduce method in order to calculate the total for each of the input fields' values. But you can achieve the same thing with a for loop.

JSFiddle: Alternative "calculateTotal" function with for loop

More information on Input handling in React

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      total: 0,
      numbers: {
        comp1: 1,
        comp2: 0,
        comp3: 4,
        comp4: 0,
        comp5: 0,
        comp6: 0
      }
    };
  }

  componentDidMount() {
    // Calculates the total after component is mounted
    this.setState({ total: this.calculateTotal(this.state.numbers) });
  }

  calculateTotal = (numbers) => {
    return Object.entries(numbers).reduce((finalValue, [key, value]) => {
      if (value === "") {
        // if entered value is empty string "", omits it
        return finalValue;
      }
      return finalValue + value;
    }, 0);
  }

  handleTotal = (e) => {
    const { value, name } = e.target; // gets the name and value from input field
    const parsedValue = value === "" ? "" : parseFloat(value); // parses the value as a number or if empty treats it as empty string ""
    this.setState((prevState) => {
      // creates new immutable numbers object, using previous number values and the currently changed input value
      const updatedNumbers = {
        ...prevState.numbers,
        [name]: parsedValue
        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names
      };
      // calculates the new total from updated numbers:
      const newTotal = this.calculateTotal(updatedNumbers);
      return {
        numbers: updatedNumbers,
        total: newTotal
      }
    })
  }

  render() {
    return (
      <div>
        <input type="number" name="comp1" onChange={this.handleTotal} value={this.state.numbers.comp1} />
        <input type="number" name="comp2" onChange={this.handleTotal} value={this.state.numbers.comp2}/>
        <input type="number" name="comp3" onChange={this.handleTotal} value={this.state.numbers.comp3}/>
        <input type="number" name="comp4" onChange={this.handleTotal} value={this.state.numbers.comp4}/>
        <input type="number" name="comp5" onChange={this.handleTotal} value={this.state.numbers.comp5}/>
        <input type="number" name="comp6" onChange={this.handleTotal} value={this.state.numbers.comp6}/>
        <div id="total">{this.state.total}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

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

Sam Ewdala · Accepted Answer · 2020-03-04 16:58:26Z

const handleFormSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    let total = 0;
    for (let [key, value] of formData.entries()) {
        total += value * 1;
    }
    document.querySelector('#total').textContent = total;
};

document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('form');
  form.addEventListener('submit', handleFormSubmit, false);
});

<form>
  <input type="number" id="comp1" name="comp1" />
  <input type="number" id="comp2" name="comp2" />
  <input type="number" id="comp3" name="comp3" />
  <input type="number" id="comp4" name="comp4" />
  <input type="number" id="comp5" name="comp5" />
  <input type="number" id="comp6" name="comp6" />
  <button type="submit">submit</button>
</form>
<span>total</span>
<div id=total></div>

elvira.genkel · Accepted Answer · 2020-03-04 16:46:45Z

1

You just re-assign variable in every iteration of a loop. Change to smth like this:

handleTotal = e => {  
    // Grab all inputs that start with ID 'comp'
    let inputs = document.querySelectorAll('[id^="comp"]');

    // Trying to loop through the values and get the sum of all inputs
    let totalVal=0
    for (var i = 0; i < inputs.length; i++) {
        totalVal += inputs[i].value
        console.log(totalVal);
    }

    //Trying to grab total values of all inputs and put in element 
    document.getElementById('total').innerHTML = totalVal;
}

+= operator just adds value of next element to total variable. it is equal to totalVal = totalVal + inputs[i].value

answered Mar 4, 2020 at 16:46

elvira.genkel

1,3331 gold badge6 silver badges12 bronze badges

Collectives™ on Stack Overflow

React - Loop inputs and get sum value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related