Untitled diff
23 lines
import React, { useState } from 'react';
import React, { useState } from 'react';
import Cat from './Cat';
const MouseTracker = () => {
const TrackerWithCat = () => {
const [x, setX] = useState(0);
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [y, setY] = useState(0);
const handleMouseMove = ({ clientX, clientY }) => {
const handleMouseMove = ({ clientX, clientY }) => {
setX(clientX);
setX(clientX);
setY(clientY);
setY(clientY);
};
};
// Instead of displaying an <h1 /> and <p />, just diplay this <Cat />.
return (
return (
<div style={{ height: '100vh', width: '100vw' }} onMouseMove={handleMouseMove}>
<div style={{ height: '100vh', width: '100vw' }} onMouseMove={handleMouseMove}>
<h1>Move the mouse and see its coordinate!</h1>
<Cat x={x} y={y} />
<p>The current mouse position is:</p>
<p>
x: {x} y: {y}
</p>
</div>
</div>
);
);
};
};
export default MouseTracker;
export default TrackerWithCat;