How to deal with this.setState issue in react JS

Question

for some reason the value of my setState is not updating when I press the next button. It is for a progress bar where the progress bar adds 20 each time the button is pressed. So like value:this.state.value+20 Does anyone know whats going on? Any help is appreciated. Thanks!

import React, {Component} from "react";
import { Button, Progress } from 'reactstrap';
import "../src/Questions.css"

class Questions extends React.Component {



     handleClick=()=>{
         alert(this.state.value);
         this.setState({
             value:this.state.value +20
         })


     }

    render() {

        this.state = {

            value:10
}

        return(
            <div>
                <div><Progress value={this.state.value} /></div>
                <div className="howMuchText">How much does it cost to build an app</div>


                <div className="nextButton">
                <Button onClick={this.handleClick} color="primary" size="lg">Next</Button>
                </div>
            </div>
        )
    }
}

export default Questions;

Why do you have `this.state = { value: 10}` inside of your render? That’s the cause of your issue and not something you are supposed to do. — Michael Cheng, Dec 09 '18 at 16:20
Take the time to go through some beginner React tutorials before asking a question here. This type of question is not really helpful to others and is easily debugged (akin to a typo). To explain: That’s not how you default state in React. You have to do it in the constructor or by using the class field declaration shortcut. By doing that in render, `value` will always be 10. — Michael Cheng, Dec 09 '18 at 16:27
i don't think this question should have been down voted it discourages people from asking questions :( kenny335 may have done tutorials and none of them explained this...but im a newbie to stack overflow so maybe im wrong :) — Bens Steves, Dec 09 '18 at 16:59

score 0 · Answer 1 · answered Dec 09 '18 at 16:24

changing state inside the render function is wrong. At every update, state is going to change. State is immutable at react. You can initialize it inside your constructor function.

  constructor(props) {
        super(props);
        this.state = {

            value:10
             }
       }

score 0 · Answer 2 · answered Dec 09 '18 at 16:28

0

You should use constructor to initialize the value. What are you doing wrong in your code when you click button it is updating the value but setState re-render the so it again to initialize value=10.

import React, {Component} from "react";
import { Button, Progress } from 'reactstrap';
import "../src/Questions.css"

class Questions extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value:10
        }
   }


 handleClick=()=>{
     alert(this.state.value);
     this.setState({
         value:this.state.value +20
     })


 }

render() {

    return(
        <div>
            <div><Progress value={this.state.value} /></div>
            <div className="howMuchText">How much does it cost to build an app</div>


            <div className="nextButton">
            <Button onClick={this.handleClick} color="primary" size="lg">Next</Button>
            </div>
        </div>
    )
 }
}

  export default Questions;

answered Dec 09 '18 at 16:28

vikas336

120
8

you no longer need constructor...the code will still execute with it but you don't need it save your fingers some typing :) – Bens Steves Dec 09 '18 at 16:30
1

@BensSteves I know but this is the proper way to initialize your variable in react when you will have more numbers of state then it will be difficult for you to manage state without constructor. – vikas336 Dec 09 '18 at 16:35
I'm not sure I quite agree with that. Imagine you have five methods that you have to constantly bind to your component just bc your using the constructor route. I think you can manage the state just as well without. Just my opinion. i do think your way is good for beginners though. Gives them a better understanding. and plus I think there's more documentation for your way :) – Bens Steves Dec 09 '18 at 16:39
1

I agree but I am talking about code quality and it will be easy for developer to understand the problem when they will get bugs in their code. – vikas336 Dec 09 '18 at 16:43
ah yes I agree with you – Bens Steves Dec 09 '18 at 17:03

score 0 · Accepted Answer · answered Dec 09 '18 at 16:36

The reason this is not updating is because you are updating the state using setState in your handleClick function then reseting it in your render function so you are undoing your update. Try this.

Change your source from what you have to this:

import React, { Component } from "react";
import { Button, Progress } from 'reactstrap';
import "../src/Questions.css"

//you've imported component so you don't need to do React.Component
class Questions extends Component {

   state = { 
     value: 10, 
   } 
     handleClick = () =>{
         alert(this.state.value);
         this.setState({
             value: this.state.value +20
         })
     }

    render() {

        return(
            <div>
                <div><Progress value={this.state.value} /></div>
                <div className="howMuchText">How much does it cost to build an app</div>


                <div className="nextButton">
                <Button onClick={this.handleClick} color="primary" size="lg">Next</Button>
                </div>
            </div>
        )
    }
}

This should do it. Hope this helps.

How to deal with this.setState issue in react JS

3 Answers3