Estoy construyendo una cuadrícula navegable con teclas de flecha. Todo funciona bien, pero me gustaría que el elemento enfocado cambie el img cuando se selecciona de un img a un gif.

Traté de darle el mismo nombre que usé para importar la imagen, como la etiqueta de identificación del elemento. Pero esto no funcionó. React interpreta la etiqueta de identificación como una cadena y no como el nombre de la ruta a esa imagen.

¿Alguna idea de cómo hacer que React interprete la ID del elemento como la ruta de la imagen para buscar?

 import items from './assets/images/items.png' import items2 from './assets/images/items.gif'

 useEffect(() => { let i = 0 const handleKeyPressed = (e) => { //to focus the right element if (['KeyD', 'ArrowRight'].includes(e.code) ) { i = ++i let menuElement= document.getElementsByClassName('menu-image')[i] menuElement.style.border="solid 3px" const dynamicString = document.getElementsByClassName('menu-image')[i].id menuElement.src=dynamicString//React interprets it as a string } } window.addEventListener('keydown', handleKeyPressed); return () => { window.removeEventListener('keydown', handleKeyPressed); }; }, []);

 <div className='menu-grid'> <div className="menu-item"> <img id="items" className="menu-image" alt="a draw of a bag" src={items2} style={{ border: 'solid 3px'}} onPointerOver={e => { e.currentTarget.src = items2 e.target.style.border="solid 3px"} } onPointerLeave={e => { e.currentTarget.src = items e.target.style.border="solid transparent 3px"} }/> <span> Items </span> </div> </div>