Cannot read property 'length' of undefined - after pressing 'Enter' key the value become undefined

Question

Why when I'm pressing the Enter key the value of idNumber becomes undefined ?
If I click on the button calling checkID() it shows the input 's string length in the console.log(idNumber)

It's just so weird

    const [idNumber, setNumber] = useState();

    useEffect(() => {
        const submit = document.getElementById('idNum');
        submit.addEventListener('keyup', enterPressed);
      }, []);

 const onChangeHandler = (event) => {
    const isDigits = event.target.value.replace(/\D/g, '');
    setNumber(isDigits);
  };


      const enterPressed = (event) => {
        if (event.key === 'Enter') {
          console.log('idNumber.length ' + idNumber.length);
        
        }
      };

       const checkID = () => {
         console.log(idNumber.length)
         };

       <input 

        value={idNumber}
        id='idNum'
        onChange={(event) => onChangeHandler(event)}
       / >

      <button onClick={checkID}>  </button>

Thanks for everyone.

Answer 1

You shouldn't be assigning event handlers manually in React, assign onKeyPress the same way as you assign onChange and it works as expected:

 const Comp = () => { const [idNumber, setNumber] = useState(); const onChangeHandler = (event) => { const isDigits = event.target.value.replace(/\\D/g, ''); setNumber(isDigits); }; const onKeyPress = (event) => { if (event.key === 'Enter') { console.log(idNumber); } }; const checkID = () => { console.log(idNumber) }; return ( <div> <input value={idNumber} id='idNum' onChange={(event) => onChangeHandler(event)} onKeyPress={(event) => onKeyPress(event)} / > <button onClick={checkID}>Btn</button> </div> ) } ReactDOM.render(<Comp />, document.getElementById("root"))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script> <script> var { useReducer, useEffect, useState, useRef, useCallback } = React </script> <div id="root"></div>