scrimba
Meta scrims
React Advanced
Lab Solution: Implementing a scroller
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Lab Solution: Implementing a scroller
AboutCommentsNotes
Lab Solution: Implementing a scroller
Expand for more info
src
App.js
run
preview
console
import { useEffect, useState } from "react";

const MousePosition = ({ render }) => {
const [mousePosition, setMousePosition] = useState({
x: 0,
y: 0,
});

useEffect(() => {
const handleMousePositionChange = (e) => {
// Use e.clientX and e.clientY to access the mouse position on the screen
};

window.addEventListener("mousemove", handleMousePositionChange);

return () => {
window.removeEventListener("mousemove", handleMousePositionChange);
};
}, []);

// What should be returned here?
return null;
};

// This component should not receive any props
const PanelMouseLogger = ({mousePosition}) => {
// The below if statement can be removed after the render props pattern is implemented
if (!mousePosition) {
return null;
}
return (
<div className="BasicTracker">
<p>Mouse position:</p>
<div className="Row">
<span>x: {mousePosition.x}</span>
<span>y: {mousePosition.y}</span>
</div>
</div>
);
};

// This component should not receive any props
const PointMouseLogger = ({mousePosition}) => {
// The below if statement can be removed after the render props pattern is implemented
if (!mousePosition) {
return null;
}
return (
<p>
({mousePosition.x}, {mousePosition.y})
</p>
)
};

function App() {
return (
<div className="App">
<header className="Header">Little Lemon Restaurant 🍕</header>
<PanelMouseLogger />
<PointMouseLogger />
</div>
);
}

export default App;
Console
/public/index.html
-2:46