Infinite Loop with componentDidUpdate

JavaScript
#1

Here is my code:

componentDidUpdate(prevState) {
    const stateHasChanged = prevState.currentInput !== this.state.currentInput;
    if (stateHasChanged) {this.handleUppercase()} 
  }

  handleUppercase = () => {
    const spaced = this.state.currentInput.split("");
    for (let i = 0; i < spaced.length; i++) {
      if (spaced[i] === spaced[i].toUpperCase()) {
        this.setState({ uppercaseLetters: this.state.uppercaseLetters + 1 });
      }
    }
  };

I can see why it is causing an infinite loop but is there a way to call setState within componentDidMount…?

#2

What exactly are you trying to achieve?

#3

whenever a capital letter gets inputted into the input box, I want the state to increment a entry called uppercaseLetters for every uppercase letter that is in the input box…? If you get me…?
Its a password strength test so looking for uppercase letters…

#4

Assuming you’re using controlled input, why not count uppercase letters when you’re updating state with changed input?

Example (with hooks, but you’ll get the idea): https://codepen.io/jenovs/pen/VwjNjqx?editors=1010

#5

Does some part of the UI dynamically change based on if the password is accepted or not?

Because if it’s just a static check, you can also wait until submit and the element (assuming it’s an input of type password) also has the pattern attribute you can use for validation.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password#Validation

#6

Whenever a user inputs characters it updates the UI whenever a key gets entered… So yes, it changes dynamically, so a bit confused how to get this to work

#7

Did you look at the example given?

If it’s a controlled input you can check the value on the event target in the handler function you have on the input element and make whatever state changes or updates you need.

If you can post a link to a Codesandbox or something like that it would help.

#8