I am new to React js. Right now I am coding an application where user can update points for each team member in a team. Increment and decrement is working very well, I got alot of help here. Right now I am trying to show the total of the points per team. Like the example below, I want the total to update when the points are changed. So if Martin gets a point, total should change to 6. And when Matthew makes a mistake, he loses a point. So then the total should decrease back to 5. But I cant figure out how to do this. Can someone help me ?

Example:

John 0

Matthew 3

Martin 0

Chris 2

Anna 0

Total: 5

My Code:

Counter Component

import React, { Component } from "react";

import ReactDOM from "react-dom";



export default class Counter extends Component {

    render() {

        const { onIncrement, onDecrement } = this.props;

        return (

            <div>

                <span>{this.formatCount()}</span>

                <button onClick={() => onIncrement(this.props.counter)}>

                    Add

                </button>



                <button

                    onClick={() => onDecrement(this.props.counter)}

                    disabled={this.props.counter.value === 0 ? "disabled" : ""}

                >

                    Delete

                </button>

            </div>

        );

    }



    formatCount() {

        const { value } = this.props.counter;

        return value;

    }

}



if (document.getElementById("counter")) {

    ReactDOM.render(<Counter />, document.getElementById("counter"));

}

Counters component

import React, { Component } from "react";

import ReactDOM from "react-dom";

import Counter from "./counter";



class Counters extends Component {

    constructor() {

        super();

        this.state = {

            counters: [

                { id: 1, value: 0 },

                { id: 2, value: 0 },

                { id: 3, value: 0 },

                { id: 4, value: 0 },

                { id: 5, value: 0 }

            ]

        };

    }

    handleIncrement(counter) {

        const counters = [...this.state.counters];

        const index = counters.indexOf(counter);

        counters[index] = { ...counter };

        counters[index].value++;

        this.setState({ counters });

    }



    handleDecrement(counter) {

        const counters = [...this.state.counters];

        const index = counters.indexOf(counter);

        counters[index] = { ...counter };

        counters[index].value--;

        this.setState({ counters });

    }



    handleReset() {

        const counters = this.state.counters.map(c => {

            c.value = 0;

            return c;

        });

        this.setState({ counters });

    }



    render() {

        return (

            <div>

                <button onClick={this.handleReset.bind(this)}>Reset</button>

                {this.state.counters.map(counter => (

                    <Counter

                        key={counter.id}

                        onIncrement={this.handleIncrement.bind(this)}

                        onDecrement={this.handleDecrement.bind(this)}

                        counter={counter}

                    />

                ))}



            </div>

        );

    }

}



export default Counters;



if (document.getElementById("counters")) {

    ReactDOM.render(<Counters />, document.getElementById("counters"));

}

You can add a line for the totals by adding another property to your state along with counters called total. This total value will need to be changed on calls to increment, decrement and reset.

Below is a demonstration of how this is accomplished:

class Counter extends React.Component {

    render() {

        const { onIncrement, onDecrement } = this.props;

        return (

            <div>

                <span>{this.formatCount()}</span>

                <button onClick={() => onIncrement(this.props.counter)}>

                    Add

                </button>



                <button

                    onClick={() => onDecrement(this.props.counter)}

                    disabled={this.props.counter.value === 0 ? "disabled" : ""}

                >

                    Delete

                </button>

            </div>

        );

    }



    formatCount() {

        const { value } = this.props.counter;

        return value;

    }

}





class Counters extends React.Component {

    constructor() {

        super();

        this.state = {

            counters: [

                { id: 1, value: 0 },

                { id: 2, value: 0 },

                { id: 3, value: 0 },

                { id: 4, value: 0 },

                { id: 5, value: 0 }

            ],

            total: 0

        };

    }

    handleIncrement(counter) {

        const total = this.state.total + 1;

        const counters = [...this.state.counters];

        const index = counters.indexOf(counter);

        counters[index] = { ...counter };

        counters[index].value++;

        this.setState({ counters: counters, total: total });

    }



    handleDecrement(counter) {

        const total = this.state.total - 1;

        const counters = [...this.state.counters];

        const index = counters.indexOf(counter);

        counters[index] = { ...counter };

        counters[index].value--;

        this.setState({ counters: counters, total: total });

    }



    handleReset() {

        const total = 0;

        const counters = this.state.counters.map(c => {

            c.value = 0;

            return c;

        });

        this.setState({ counters: counters, total: total });

    }



    render() {

        return (

            <div>

                <button onClick={this.handleReset.bind(this)}>Reset</button>

                {this.state.counters.map(counter => (

                    <Counter

                        key={counter.id}

                        onIncrement={this.handleIncrement.bind(this)}

                        onDecrement={this.handleDecrement.bind(this)}

                        counter={counter}

                    />

                ))}

                <div>Total: {this.state.total}</div>

            </div>

        );

    }

}



ReactDOM.render(

  <Counters/>,

  document.getElementById("react")

);

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

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

Alternatively you can skip storing the total value in state and dynamically find the total value based on the counters values like so:

<div>Total: {this.state.counters.map((counter) => { return counter.value; }).reduce((a, b) => a + b, 0);}</div>

There are two options:

1. Calculate total in render: const total = this.state.counters.reduce((sum, counter) => sum + counter.value, 0) (see Array.prototype.reduce())




2. Increment/decrement total with counters: this.setState(oldState => ({total: oldState.total + 1}))

As a good habbit you should not use this.state to get a value for setState because there can be multiple increment/decrement events. Use this syntax instead: setState(oldState => {/* some code */; return newState}).

Also it is better to pass {...counter} instead of counter={counter} and use id to find counter inside handleIncrement/handleDecrement. It is easier to track changes to props and avoid unnecessary renders this way. And there will be no problems with multiple simultaneous events on the same counter.