React JS Array state just keeps reseting instead of adding new values

Question

Im trying to make a state that will contain all the pressed keys.

function App() {

  const [inputArray, setInputArray] = useState(["After me should be a list of keys: "]);

  function keyDownListener(e){
    console.log(`Key: ${e.key} with keycode ${e.keyCode}. Array: ${inputArray} `);

    let clonedArray = [...inputArray];
    clonedArray.push(e.key);
    setInputArray(clonedArray);
  }
 
  useEffect(() => {
    document.addEventListener('keydown', keyDownListener);
    }, []);

  return (
    <div className='app' >
      {inputArray}
    </div>
  );
}

But for some reason it always has only one last pressed key altho I tried a lot of ways to update the state the result was always the same. So the output always looks like this: After me should be a list of keys: Alt and it does react to me pressing keys but its just always showing only one key instead of adding new ones like that: After me should be a list of keys: AltAltAltAlt

Pratik Wadekar · Accepted Answer · 2022-07-19 07:34:53Z

1

Update your function to this

function keyDownListener(e) {
  console.log(`Key: ${e.key} with keycode ${e.keyCode}. Array: ${inputArray} `);
  setInputArray(prevArray => [...prevArray, e.key]);
}

answered Jul 19, 2022 at 7:34

Pratik Wadekar

1,2749 silver badges19 bronze badges

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

1 Comment

Bodya Over a year ago

I feel like I tried million ways of updating that damn array and nothing worked but, well, your way is working. Thank you

Poyoman · Accepted Answer · 2022-07-19 07:48:37Z

0

Your useEffect is missing a dependency (keyDownListener) so it always refers to the first keyDownListener (which itself refers to the first inputArray).

You can fix your problem like this for instance :

  useEffect(() => {
    function keyDownListener(e){
      console.log(`Key: ${e.key} with keycode ${e.keyCode}. Array: ${inputArray} `);

      let clonedArray = [...inputArray];
      clonedArray.push(e.key);
      setInputArray(clonedArray);
    }

    document.addEventListener('keydown', keyDownListener);
    
    return () => document.removeEventListener('keydown', keyDownListener);
  }, [inputArray]);

edited Jul 19, 2022 at 7:48

answered Jul 19, 2022 at 7:36

Poyoman

2,0011 gold badge24 silver badges34 bronze badges

4 Comments

Bodya Over a year ago

This somehow made an infinite loop and browser console is just spaming keyDownListener(e) with diffirent keys now. Answer from Pratik Wadekar seems to work tho

Poyoman Over a year ago

You are right. keyDownListener has to be created with "useCallback" or be created right inside useEffect. I will edit my answer

Bodya Over a year ago

Works too, I wonder which way is more correct now, thank you

Poyoman Over a year ago

Either way are correct ;) It just depends on the context or the style you prefer ;) The most important is to understand why those solutions fix your pb ;)

Collectives™ on Stack Overflow

React JS Array state just keeps reseting instead of adding new values

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related