javascriptreactjsrefactoringeslint

ESLint - no-unused-expressions in ReactJS


Getting a ESLint error when copiling with babel:

Any idea how to get rid of these whilst making my timer still work as intended? Or have you got a better way of me doing my timer?

class RequestTimer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            seconds: 0,
            minutes: 0,
            hours: 0
        }

        this.getTime = this.getTime.bind(this);
    }    

    getTime() {
        let second = this.state.seconds
        let minute = this.state.minutes;
        let hour = this.state.hours; 

        this.state.seconds % 59 === 0 && this.state.seconds !== 0 ? minute += 1:null;
        this.state.minutes % 59 === 0 && this.state.seconds % 59 === 0 && this.state.minutes !== 0 ? (hour += 1, minute = 0):null;

        this.setState({
            seconds: second +=1,
            minutes: minute,
            hours: hour
        })
    }

    componentDidMount() {
        this.timer = setInterval(this.getTime, 1000)
    }

    render() {
        return (
            <TimerContainer>
                <h2>Last Request:</h2>
                <p>{this.state.hours}h {this.state.minutes}m {this.state.seconds % 60}s</p>                
            </TimerContainer>
        )
    }
}

Solution

  • You want to use a proper if statement:

    getTime() {
        let second = this.state.seconds
        let minute = this.state.minutes;
        let hour = this.state.hours; 
    
        if (this.state.seconds % 59 === 0 && this.state.seconds !== 0) {
            minute += 1;
        }
        if (this.state.minutes % 59 === 0 && this.state.seconds % 59 === 0 && this.state.minutes !== 0) {
            hour += 1;
            minute = 0;
        }
    
        this.setState({
            seconds: second +=1,
            minutes: minute,
            hours: hour
        });
    }
    

    Don't use the ternary operator if you don't want to do anything with the result value. And especially you should not use it when you have no else case or when you have to use the comma operator to do multiple things.