Can't update state in React via key event

Question

I'm making a calculator with React, when I click the divs they trigger a function to update the state which goes into the display output of the calculator, I have no problem at all doing this with clicking the divs. This is the code that is working as expected:

const Calculator = () => {

  const initialState = {
    val: "0",
  }

  const [value, setValue] = useState(initialState);

  const sendCharacter = (number) =>{
    let str = number.toString();

    if (value.val != "0") {
      const conc = value.val.concat(str);
      setValue({
        val: conc
      });
    } else {
      setValue({
        val: str
      });
    }

  };

  return (
    <div id='calculator'>
      <div id='display'>{value.val}</div>
      <div id='one' className='numbers keys' onClick={() => sendCharacter(1)}>1</div>
    </div>
  );

Now, I want to do the same but instead of clicking div id="one" to add "ones" to my state I want those ones added to the state when I press the key 1. I added an eventsListener via useEffect() that loads only once after initial render. When I click 1 it calls the exact same function with the same exact argument that is called when clicking which is sendCharacter(1), here is my code:

  useEffect(() => {
    console.log("useEffect");
    document.addEventListener("keyup", detectKey, true);
  }, []);

  const detectKey = (e) => {
    
    if (e.key == "1") {
      sendCharacter(1)
    }

  };

However when I press the i key I'm only able to update the state only the first time, if I try to add the second digit to my number it acts as if my actual state was "0" instead of "1" which doesn't allow it to enter the if statement. To be clear and short: If if click my div id="one" I can enter the first condition of my if statement and update val via my conc variable, if i do it pressing the key i it always enters the else statement.

 if (value.val != "0") {
      const conc = value.val.concat(str);
      setValue({
        val: conc
      });
    } else {
      setValue({
        val: str
      });
    }

I tried logging messages everywhere and to see if my argument "1" is the same via clicking or via pressing my key, they send the exact same value, I'm totally lost in here and frustrated because I've got more than 1 hour trying to figure out what's going on. Also, I checked to see if the component was rendering before pressing the key, which was not the case.

BTW sorry for my English, not my first language, if someone can help me and needs clarification on one part I will answer asap, thanks in advance.

Answer 1

It seems you are falling into closures trap. Try updating your sendCharacter code to following.

  const sendCharacter = (number) =>{
    let str = number.toString();

    setValue(value => {
        if (value.val != "0") {
            const conc = value.val.concat(str);
            return {
               val: conc
            };
        } else {
            return {
               val: str
            };
        }
    });
  };