Estoy tratando de diseñar la matriz de datos, de modo que cuando pasa el cursor sobre ella, el cursor se establece en cursor: grab; . Intenté usar diferentes elementos para que sucediera, ninguno funcionó, .li{} , .ol{} , MediaComponent{} , img{} , imgSrc{} , data{} , div{} . El único que funcionó para mí fue *.{} , sin embargo, el problema con esto es que el cursor permanece en la propiedad de captura para el resto de los elementos de la página. Estoy tratando de codificarlo para que el cursor:grab; El elemento solo pertenece a la matriz de datos.

 import React, { Component,useRef, setStatus, status } from 'react'; import './Turkish.css'; import turk1 from "./music/turk1.mp3"; import turk2 from "./music/turk2.mp3" import turk3 from "./music/turk3.mp3" import turk4 from "./music/turk4.mp3" const data = [ { imgSrc: 'turk1.png', audioSrc: turk1 }, { imgSrc: 'turk2.png', audioSrc: turk3 }, { imgSrc: 'turk3.png', audioSrc: turk4 }, { imgSrc: 'turk4.png', audioSrc: turk2 }, ]; export default class Turkish extends Component { render() { return ( <div> <ol> {data.map(({ imgSrc, audioSrc }) => ( <MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} /> ))} </ol> </div> ); } } const MediaComponent = ({ imgSrc, audioSrc }) => { const audioRef = useRef(null); const toggleAudio = () => audioRef.current === null ? console.log("Audio component is not loaded yet.") : audioRef.current.paused ? audioRef.current.play() : audioRef.current.pause(); return ( <li> <img src={imgSrc} onClick={toggleAudio} /> <audio ref={audioRef} src={audioSrc} onLoad={() => setStatus({ ...status, isLoaded: true })} onPlay={() => setStatus({ ...status, isPlaying: true })} onPause={() => setStatus({ ...status, isPlaying: false })} onError={() => setStatus({ ...status, error: true })} /> </li> ); };

¿Alguna idea?

Gracias

-Zpo