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();
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>
)
}
}
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();
The error you mentioned is occurring because the `timeDisplay` function is not defined within the context of the `render` method. To resolve this issue, you need to properly reference `timeDisplay` as a method of the component class. Here's the corrected code with the `timeDisplay` method called within the `render` method:
class Home extends React.Component {
constructor(props) {
super(props);
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 = this.timeDisplay(); // Correctly calling the timeDisplay method from the class
return (
<div>
<p className='timer'>{time}</p>
</div>
)
}
}
export default Home;
By using `this.timeDisplay()` instead of just `timeDisplay()` within the `render` method, you are correctly referencing the `timeDisplay` method that is defined within the class. This should resolve the `timeDisplay is not defined` error.