Not able to Received the id in onKeydown in react

Question

code:-

   useEffect(() => {
        setPlayer();
        window.addEventListener("keydown", handleKeyDown);
        return function cleanup() {
            window.removeEventListener("keydown", handleKeyDown);
        };
    }, [props])

  const handleKeyDown = (event, ID) => {
        if (event.key === "Delete") {
            //alert(name);
            axios({
                method: 'post',
                url: `${API_ENDPOINT}/api/setCue?Idx=${ID}&RDL=${props.val}`,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Access-control-allow-origin': '*'
                },
                auth: {
                    username: 'admin',
                    password: 'password'
                },

            }).then(response => {
                console.log("Delete Inside Axios");
            }).catch(error => {
                console.log("Error In Post Data", error);
            });
            console.log("Delete Key Press", ID, props.val);

        }
}



 <tbody>
                   
        {
       PlaylistData && PlaylistData.map((playdata) => {
     return (
          <tr key={playdata.idx} tabIndex={playdata.idx} className="border_bottom"
        KeyDown={(e) => handleKeyDown(e, playdata.idx)} onLoad={() => active(playdata.idx)}                              
                 >
         <td style={{ color: "white", width: "200px" }}>
            <img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="50%" />
                                    </td> 

when I click the delete button it does not send the table index but when I remove the window.addEventListener("keydown", handleKeyDown); its sending the id number but not the props values I want both id and props values to print in the console. How can I fix that? please help.

Answer 1

You can get the value of target using event.code == "Delete". So replace event.key by event.code

You can see the example below to see how it works i.e. go to input and then press any key to see the key entered.

const input = document.querySelector('input');
const log = document.getElementById('log');

input.onkeydown = logKey;

function logKey(e) {
  log.textContent += ` ${e.code}, `;
}

<input>
<h3 id="log"></h3>