HomeHomeCommunityCommunityCollectionsCollectionsFind JobsFind JobsTagsTagsAsk a questionAsk a question

'function' is not defined within React Component

asked on

asked 4 months ago

answers

2Answers

views

85Views

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>
        )
    }
}

2 Answers

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.


Write your answer here

Top Questions