Whenever I click a key, I attempt to update the value of a variable but it appears not to be working as intended.
↓ The current implementation is not effective and needs improvement
import React, { useState, useEffect } from 'react';
const List = ({ items }) => {
const [myHTML, setMyHTML] = useState([]);
function handleKeyPress(e) {
if (e.key === "e" && window.location.pathname === '/PlayMode') {
console.log('e pressed');
setMyHTML([<div><h1>lol</h1></div>]);
}
}
if (!document.eventListenerAdded) {
document.addEventListener("keyup", handleKeyPress);
document.eventListenerAdded = true;
}
return (
<div>
{myHTML}
</div>
);
};
Despite the fact that putting it in a timeout resolves the issue temporarily, I believe there must be a better solution.
↓ There must be an improved approach without relying on timeouts
import React, { useState, useEffect } from 'react';
const List = ({ items }) => {
const [myHTML, setMyHTML] = useState([]);
console.log('starting');
let myTimeout = setTimeout(() => {
setMyHTML([<div><h1>pok</h1></div>]);
}, 2000);
return (
<div>
{myHTML}
</div>
);
};
I am determined to find an alternative solution without resorting to timeouts with minimal delay. Is there a better way to achieve this?