React: Variable resets to default if another event function is run

Question

I have the following code in React:

let down = 0

const moveUp = e => {
//other code
let up = down - 300
}

const moveDown = e => {
//other code
down = down + 300
}

<Button onClick={moveUp} btntext="Up"/>
<Button onClick={moveDown} btntext="Down"/>

Down is the first button a user would click on, it increments the down variable by 300, so let's say we've incremented down 3 times, which would be 900.

The problem is, when we try to click on the Up button referencing the moveUp function, the down variable is now set back to it's default which is 0, why does that happen, shouldn't the change to 900 be stored in memory?

I would really love some help here, there's clearly something I'm not understanding about Javascript events and variable scopes.

Does this answer your question? [What is state in React?](https://stackoverflow.com/questions/54379896/what-is-state-in-react) — Emile Bergeron, Jul 20 '20 at 02:54

score 1 · Answer 1 · edited Jul 20 '20 at 07:56

Try storing down as a state variable. Your component maybe getting rerendered somewhere causing down to initialize back to 0.

Updating that would be

import React, { useState } from 'react'

const [down, setDown] = useState(0)

const moveUp = e => {
    //other code
    setDown(down - 300)
}

const moveDown = e => {
    //other code
    setDown(down + 300)
}

<Button onClick={moveUp} btntext="Up"/>
<Button onClick={moveDown} btntext="Down"/>

React: Variable resets to default if another event function is run

1 Answers1