[REACT] How to update input field based on dynamically typed other fields' calculation results

Hi fellow campers,
So I have this problem, where I have a simple form, there might be more than one form field but they are all related to each other. What I’m trying to do is to calculate the last input’s value which is based on the rest of the inputs’ value and are typed dynamically and then to setState() to return a new state. I have handler functions (to add, remove or change value of input fields) which work when I don’t need to handle this particular update. Now here’s the code:

class App extends React.Component {
    state = {
        bank: 10,
        totalPrice: 0,
        hands: [
                name: "hand1",
                backPrice: 0,
                bankPrice: 0,
                commision: 0,
                realPrice: 0
        handCount: 1
    componentDidUpdate(prevProps, prevState) {
        const hands = this.state.hands;

        // initialized variables needed to calculate a result
        const totalPrice = hands.reduce((total, hand) => {
            return (hand.backPrice || 1) * total;
            }, 1);
        // lastHandPrice is ALWAYS needed, it is the base of the rest of calculations
        const lastHandPrice = (this.state.bank * totalPrice) /
            (hands[hands.length - 1].bankPrice -
            (hands[hands.length - 1].commision / 100));
        const newHands = hands.reduceRight(
            // calculation starts in reverse, with the first value being lastHandPrice
            // it returns an array of number values reversed again to be in correct order
            (newHands, hand, ind, array) => {
                let prevHand = array[ind + 1];
                let prevPrice = newHands[array.length - ind - 2];
                if (hand == array[array.length - 1]) {
                    return newHands.concat(lastHandPrice)
                } else {
                    return newHands.concat(
                        prevPrice * (1 - (prevHand.commision / 100)) /
                        (hand.bankPrice - (hand.commision / 100))
            }, []

        if (this.state.hands !== prevState.hands)
                totalPrice: totalPrice,
                hands: this.state.hands.map((hand, index) => {
                    return Object.assign(hand, {realPrice: newHands[index]})

There are four main input fields, represented in state.hands.
So this code works correctly in my terminal but react throws me a Maximum update depth exceeded error when I try the following:

  • Add a new hand to the array

  • Try to enter anything in the input

There’s nothing more I can really do about it. I tried a few other methods to achieve this, but I always get the same error. It seems like some kind of loop starts to work but I just can’t figure it out. Why it won’t let me to update state.hands?

Input change/add/or remove handlers are very predictable, just updating the needed value, adding a field of four input fields, and removing them. To change the value I map() over the state.hands and then Object.assign() the property value I need to the object I need (hand1, hand2, etc).

componentDidUpdate() will fire on any new state, so in the case this.state.hands !== prevState.hands) is true you will have infinite loop of re-renders. Hope this makes sense

Yes, that is my intention, because values must be recalculated when a single digit or number of entries have changed, but any idea how can I fix this?

Ok, so the problem was as simple as transforming componentDidUpdate() to a callback function and using it it elsewhere.