react dom manipulation and event handler issues

Question

any tip on how to convert this js code to react...

document.body.addEventListener('mousemove',function(e){
  if (!active) return;
  let x = e.pageX;
  x -= document.querySelector('.container').getBoundingClientRect().left;
  scrollMove(x);
  console.log("moving")
  
});


function scrollMove(x){
  let transform = Math.max(0,(Math.min(x,document.querySelector('.container').offsetWidth)));
  if (active==="container-mid"){
    document.querySelector('.container-mid').style.width = transform+"px";
    scrolMid.style.left = transform-25+"px";
    if (scrolTip.getBoundingClientRect().left>scrolMid.getBoundingClientRect().left-5){
      document.querySelector('.mainTop').style.width = transform-5+"px";
      scrolTip.style.left = transform-30+"px";
    }
  }}
return (

<div className="container">
  <div className="container-mid">...</div>
    <div className=scrolMid>......</div>
    <div className="maintip">
    <div className=scrolMid>......</div>
  </div>
)

however, i tried converting the above code like this using the neccessary react hooks which are useRef, react event handler. but the later function which is the scrollmove failed to triggered when the onMouseMove event was called as seen in the code below

const containerRef = useRef(null);
const ytu = () => {
   if (!active) return;
  let x = e.pageX;
  x -= document.containerRef.getBoundingClientRect().left;
  scrollMove(x);
  console.log("moving")
}

return (
<div className="container"
ref={containerRef}
onMouseMove={ytu}
>
)

and this

const container-midRef = useRef(null);
const scrolMidRef-midRef = useRef(null);
const scrolTipRef = useRef(null);
const mainTopRef = useRef(null);


function scrollMove(x){
  let transform = Math.max(0,(Math.min(x,document.containerRef.offsetWidth)));
  if (active==="container-midRef"){
    document.container-midRef.style.width = transform+"px";
    scrolMidRef.style.left = transform-25+"px";
    if (scrolTipRef.getBoundingClientRect().left>scrolMidRef.getBoundingClientRect().left-5){
      document.mainTopRef.style.width = transform-5+"px";
      scrolTipRef.style.left = transform-30+"px";
    }
  }}

The scrollMove(x) function is not triggered. maybe there is a mistake on my part.

Answer 1

1. keep camelCase naming as convention
2. when using ref constant access it's value by yourRef.current

const App = () => {
  const containerRef = useRef(null);
  const containerMidRef = useRef(null);
  const scrolMidRef = useRef(null);
  const scrolTipRef = useRef(null);
  const mainTopRef = useRef(null);
  let active = ''
  
  const ytu = (e) => {
    if (!active) return;
    let x = e.pageX;
    x -= containerRef.current.getBoundingClientRect().left;
    scrollMove(x);
    console.log("moving")
  }
    function scrollMove(x){
    let transform = Math.max(0,(Math.min(x, containerRef.current.offsetWidth)));
    if (active === "..."){ // your condition
      containerMidRef.current.style.width = transform+"px";
      scrolMidRef.current.style.left = transform-25+"px";
      if (scrolTipRef.current.getBoundingClientRect().left > scrolMidRef.current.getBoundingClientRect().left-5){
        mainTopRef.current.style.width = transform-5+"px";
        scrolTipRef.current.style.left = transform-30+"px";
      }
    }
  }
  
  return (
    <div
      className="container" 
      ref={containerRef}
      onMouseMove={ytu}
    >
      {/* your refs */}
      <div ref={...} className="container-mid">...</div>
      <div ref={...} className="scrolMid">......</div>
      <div ref={...} className="maintip">......</div>
      <div ref={...} className="scrolMid">......</div>
    </div>
  )
}
export default App

PS: Judging from you code i suggest you to learn react basics first