estoy haciendo varios ejercicios de react, y como hay varias maneras de declarar un componente, opte por funciones flecha, mi duda es que no me funciona el setState para cambiar los valores del state dentro de mi componente cuando paso el mouse por encima.
import React, { Component } from "react";
import Botones from './BotonesDeColores'
import Header from './ContentHeader'
const handleMouseMove = (e) => {
const { ClientX, ClientY } = e
this.setState({
mouseX: ClientX, mouseY: ClientY
})
}
const handleClick = (e) => {
console.log(e)
alert('hi there!')
}
const EventMouseMove = (state) => {
state = {
mouseX: 0,
mouseY: 0
}
return (
<div className="content-wrapper">
{/* Content Header (Page header) */}
<Header />
{/* Main content */}
<section className="content">
<div className="container-fluid">
<Botones />
{/* DEBAJO VA EL CONTENIDO DE LA PAGINA */}
<button onClick={handleClick}> Hi there!</button>
<div
style={{ border: "1px solid #000", marginTop: 10, marginBottom: 10 }}
onMouseMove={handleMouseMove}
>
<p>{state.mouseX}, {state.mouseY}</p>
</div>
</div>
</section>
</div>
);
};
export default EventMouseMove;
aqui esta el div donde los numeros se deberian actualizar cuando muevo el mouse
EventMouseEvent
class EventMouseMove extends Component {....
para usar this.setState o hooks.