I'm trying to build a React component where I need to calculate the time difference between onMouseEnter and onMouseLeave when I hover over a div? I have added "time" in the state but dunno how to continue it. Since I'm a beginner in React I'm not able to get it working. Please help....Also, when I try to display these elements, I'm not sure about the timeStamp property that gets displayed.
import React from 'react';
import '../Hover/Hover.css';
class Hover extends React.Component {
constructor(props) {
super(props);
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
this.state = {
isHovering: false,
time: 0
}
}
handleMouseEnter(elementEnter){
console.log("mouseenter : ", elementEnter.timeStamp)
this.setState({
isHovering: true
})
}
handleMouseLeave(elementLeave) {
console.log("mouseleave : ", elementLeave.timeStamp)
this.setState({
isHovering: false
})
}
render() {
return(
<div className="hover" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<h1>Hover Component</h1>
</div>
)
}
}
import React from 'react';
import '../Hover/Hover.css';
class Hover extends React.Component {
constructor(props) {
super(props);
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
this.state = {
isHovering: false,
enterTime: 0,
leavingTime: 0,
}
}
handleMouseEnter(elementEnter){
this.setState({
isHovering: true, leavingTime: Date.now(),
})
}
handleMouseLeave(elementLeave) {
this.setState({
isHovering: false, enterTime: Date.now(),
})
}
render() {
const hoverTime = this.sate.leavingTime - this.state.enterTime;
return(
<div className="hover" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<h1>Hover Component</h1>
{ hoverTime > 0 && 'duration is:' + hoverTime }
</div>
)
}
}
You can add a state to store time handleMouseEnter.
constructor(props) {
super(props);
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
this.state = {
isHovering: false,
time: 0,
start: 0
}
}
handleMouseEnter(elementEnter){
console.log("mouseenter : ", elementEnter.timeStamp)
this.setState({
isHovering: true,
start: new Date()
})
}
handleMouseLeave(elementLeave) {
const newTime = new Date();
this.setState({
isHovering: false,
time: Math.abs(new Date()-this.state.start) // milisecond
start: 0
})
}