React - what's the problem with my code?

1 
export default class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        counter: 25,
      }
      this.handleClickTest = this.handleClickTest.bind(this);
    }
    handleClickTest() {
        for(let i=25;i>=0;i--){
            this.setState({counter: this.state.counter-1});
        }
    }

    render() {
        return (<div> {this.state.counter}
            <form>
                <button onClick={this.handleClickTest}>start</button>
            </form>
          </div>
        );
    }
}

I trimmed to code to the bare minimum for your convenience. When I click ‘start’ the counts changes to 24 and nothing happens more. Why does it not continue counting down?
EDIT: it seems to me after the counter displays 24 the page “refreshes”.

2

Try to remove this from this.state.counter.
this.setState({counter: state.counter - 1})

3 
'state' is not defined  no-undef

I tried. Doesn’t compile.

5

Removing the form element makes it count down to 24 without refreshing. I still don’t understand what’s wrong with using the setState method the way I did since it’s almost the same as in the EDX React course example…

6 
 handleClickTest(e) {
    e.preventDefault();
    this.setState((state) => ({
      counter: state.counter + 1,
    }));
  }

I tried this code and it works.
7

Just add this in your handleClickTest fx e.preventDefault() to avoid the page to refresh.

handleClickTest = (e) => {
    e.preventDefault()
      for(let i=25;i>=0;i--){
          this.setState({counter: this.state.counter-1});
      }
  }
9

What’s with </View> ?
I believe it should be <View/>…

10

I agree with you. Maybe a typo?

11

Amalia,
Your code was the only one that worked. Bam92’s code only counted to 24. Removing the ‘this’ gave an error. I don’t understand why your code worked without and why would using an anonymous function make a difference.

12

It is working well on my side. Just make sure you write it well (arrow function).