Why is a React child component ignoring the new prop?

Question

React

I'm learning React on a test project.

The Exercise component has child Sets. When the Set is deleted , their numbering should be recalculated, but this does not happen: the correct recalculation result is visible in the console, but the Set seems to ignore the updated number prop.


Illustration: New prop values ​​in the console, and the actual display of

Demo&Code : https://codesandbox.io/s/shy-glitter-zrukv?file=/s...

Numbering is calculated in ExerciseView :

function ExerciseView({id, title, sets}) {
    let number = 0;
    return (
        <div className="col-12" key={id}>
            <h5>{title}</h5>
            <table className="table table-bordered">
                <tbody>
                {sets.map((set) => {
                    return <Set {...set} number={number++} />
                })}
                </tbody>
            </table>
        </div>
    );
}

Answer 1

Of course, Set ignores prop changes:

class Set extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            id: props.id,
            weight: null,
            reps: null,
            enableMaxReps: false,
            number: props.number || 0,
            isFilled: false,
        };
    }
}

Remove number from state, why is it there?