Use a state variable inside a method in React

Question

For example this code:

export const Test = () => {
  const [counter, setCounter] = useState(0);
  let number;

  const DivideByCounter = () => {
     number = 10 / counter;
  }

  const IncreaseCounter = () => {
      for(let i = 0; i < 5; i++) {
         setCounter(counter + i);
  }
}

It's just an example of a code that I'm working on. The problem here is that the setCounter is updating the state correctly, however, when I use the counter to divide, it's returning me Infinity. When I console.log(counter) it's showing me 0, the initial state, however, outside the function, it shows me the updated state. Does everybody know how can I pass the update state into the function so it won't return me Infinity? Thanks in advance :)

How are you calling DivideByCounter, is it possible you are doing so before the state has finished updating? (As setting state is asynchronous) — DBS
– DBS, Commented Jul 6, 2021 at 14:26

Giovanni Esposito · Accepted Answer · 2021-07-06 14:28:55Z

1

Your problem could be connected to the fact that you call DivideByCounter before counter will be updated. Just add a check in DivideByCounter that, if counter === 0 then number = 0. Something like:

export const Test = () => {
  const [counter, setCounter] = useState(0);
  let number;

  const DivideByCounter = () => {
     if (counter === 0) number = 0;
     else number = 10 / counter;
  }

  const IncreaseCounter = () => {
      for(let i = 0; i < 5; i++) {
         setCounter(counter + i);
  }
}

answered Jul 6, 2021 at 14:28

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BB0202 Over a year ago

The check has worked, now I will try to add to useEffect

Anoushk · Accepted Answer · 2021-07-06 14:38:09Z

0

You're initial value is set to zero so when you divide for the first time you are dividing by zero which gives infinity

Maybe try adding an exception for zero like the other answer and add a useEffect containing the Divide by counter code and add counter as a dependency

edited Jul 6, 2021 at 14:38

answered Jul 6, 2021 at 14:28

Anoushk

67910 silver badges21 bronze badges

1 Comment

BB0202 Over a year ago

I'm using the useEffect, however with no dependencies. The exception worked, now it's returning me the value that it's expected, I will try adding counter as a dependency

Yanai · Accepted Answer · 2021-07-06 14:40:22Z

The Effect Hook lets you perform side effects in function components, in simple words, it means, it lets you run code when state changes or when a prop changes.

you can use UseEffect to update number only when there is a change to your counter, or a change to another prop that you want.

const [counter, setCounter] = useState(0);
  let number;

  useEffect(() => {
    DivideByCounter();
    console.log(number);
  }, [counter]);

  const DivideByCounter = () => {
    number = 10 / counter;
  };

  const IncreaseCounter = () => {
    for (let i = 0; i < 5; i++) {
      setCounter(counter + i);
    }
  };

you can share how did you try to call DivideByCounter?

I'm not 100% sure but in IncreaseCounter first for iteration sets counter to 0 and in that case DivideByCounter sets number to Infinity again... Right?

Collectives™ on Stack Overflow

Use a state variable inside a method in React

3 Answers 3

1 Comment

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Related