prevProps is the same as props in componentDidUpdate!

React
1

So, I was watching the 17- Updating Phase from React course and coding along, but when I simply wrote that code about componentDidUpdate method and saw the result in console, the prevProps was the same as props. Actually, the component was updating and the props was changing too. But prevProps was not the previous props.
This is the code:

import React, { Component } from 'react';
class Counter extends Component {
  componentDidUpdate(prevProps,prevState) {
    console.log("prevProps", prevProps);
    console.log("prevState", prevState);
  }
getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.props.counter.value === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { value } = this.props.counter
    return value === 0 ? 'zero' : value
  }

  render() { 
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button onClick={() => this.props.onIncreament(this.props.counter.id)} className="btn btn-secondary btn-sm m-2">Increament</button>
        <button onClick={() => this.props.onDelete(this.props.counter.id)} className="btn btn-danger btn-sm m-2">Delete</button>
      </div>
    )
  }
}
 
export default Counter;

And the render() in App.js :

render() {
    console.log("App - render");
    return (
      <>
        <NavBar
          totalCounters={this.state.counters.filter((c) => c.value > 0).length}
        />
        <main className="container">
          <Counters
            onReset={this.resetHandler}
            onIncreament={this.increamentHandler}
            onDelete={this.deleteHandler}
            counters={this.state.counters}
          />
        </main>
      </>
    );
  }
}

By the way, I’m using these versions, I couldn’t use the react version that Mosh was using. it didn’t allow me to install it :

    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
2

The implementation of handleIncrement() function in the App.jsx component should be something like this:

handleIncrement = (counter) => {
const counters = […this.state.counters];
const index = counters.indexOf(counter);
counters[index] = { …counter };
counters[index].value++;
this.setState({ counters });
};

This will solve your problem.