Reputation: 21
I'm very new to working with react so I tried to create a small timer application, but I receive the following error when I run this code:
(Line 40: 'timeDisplay' is not defined no-undef)
class Home extends React.Component {
constructor(props) {
super(props);
// Four states:
// work , workStop, break, breakStop
this.state = {
status: 'workStop',
time: 1500
}
}
componentDidMount() {
var interval = setInterval(this.timeTick, 1000);
this.setState({interval});
}
componentWillUnmount() {
clearInterval(this.state.interval);
}
timeTick = () => {
if (this.state.time !== 0)
this.setState({
time: this.state.time - 1
});
}
timeDisplay = () => {
const minute = Math.floor(this.state.time / 60);
const second = (this.state.time % 60) < 10 ? '0' + (this.state.time % 60) : (this.state.time % 60);
return (minute + ' : ' + second);
}
render() {
const time = timeDisplay();
return (
<div>
<p className='timer'>{time}</p>
</div>
)
}
}
Not sure what to do in this situation, I used the arrow function for defining the timeDisplay method inside the component.
Upvotes: 2
Views: 12824
Reputation: 4220
Well timeDisplay
is member of instance of Home component. You need this
to access that function. Therefore using :
const time = this.timeDisplay();
is the correct one instead
const time = timeDisplay();
Upvotes: 10