0

I have a 2d matrix of divs in React, I want to implement a functionality in which the user holds mouse click and moves the mouse pointer over the divs to change the color of them. Is there a event that can help me do this in react.

import { useState } from "react";

import { useEffect } from "react";

function Grid (){
 const [canvas, setcanvas] = useState([[]]);
 const handledown = (e) => {
    const d = e.target;
    d.style.backgroundColor = "red";
 }
const create =  () => {
    let a = []
 for (var i = 0; i<30; i++){
    a.push([]);
     for (var j=0; j<30; j++){
        var obj = {x: i, y: j, clr: "white"};
        a[i].push(obj);
    }
 }
 setcanvas(a);

 }
 useEffect(create, []);
 
    
    const m = canvas.map((x)=> {
        return (x.map((y) => {
            const clr  = x.color;
            const cls = `cell ${x.x} ${x.x}`;
            return (<div className = {cls} style={{backgroundColor: clr}} onClick ={handledown} > </div>);
        }));
    
    });
    return <div className="canvas"> {m}</div>;
 

}
export default Grid;
Anurag-210
  • 23
  • 5
  • i don't understand, do you want the divs to be red if someone hovers on them as well? – AbHi Feb 12 '23 at 15:22
  • if you just need to change the color, maybe consider to use `:hover` in CSS? BTW, this thread might have more information: https://stackoverflow.com/questions/29981236/how-do-you-hover-in-reactjs-onmouseleave-not-registered-during-fast-hover-ove – YellowD Feb 12 '23 at 16:06
  • I want them to change the color when user does two events at the same time - right click and hover over a div. – Anurag-210 Feb 13 '23 at 15:14

0 Answers0