Modifying component from solidJS to reactJS

[steady wren]

Hey, I am modifying the following .tsx component for reactJs() (from solidJS() )

import type { Component } from "solid-js";

export const ScriptComp: Component = () => {
    const handleOnMouseMove = (e: any) => {
        const { currentTarget: target } = e;

        if (!target) return;
        const rect = target.getBoundingClientRect(),
            x = e.clientX - rect.left,
            y = e.clientY - rect.top;

        target.style.setProperty("--mouse-x", `${x}px`);
        target.style.setProperty("--mouse-y", `${y}px`);
    };

    for (const card of document.querySelectorAll(".card")) {
        //@ts-ignore
        card.onmousemove = (e) => handleOnMouseMove(e);
    }

    return <></>
}

How can I achieve that? I am using starlight.

[shy delta]

You can mostly copy and paste it because react and solid use very similar jsx

You would need to import the react function component type instead (i forget the exact name)

The for block would change to query selecting all .cards being assigned to a variable and then using the .forEach method to apply your mouse move Listener