ESLint - no-unused-expressions in ReactJS

Question

Getting a ESLint error when copiling with babel:

• Line 28: Expected an assignment or function call and instead saw an expression no-unused-expressions

• Line 29: Expected an assignment or function call and instead saw an expression no-unused-expressions

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

Deeplaid

Answer 1

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.

Genteelism

Answer 2

There are couple of solution.

1.) Just Disable the rule for the entire file using eslint-disable at the top of the file.

/* eslint-disable no-unused-expressions */

2.) You should write below code at the end off all lines(28,29) so It's disabled.

/* eslint-disable-line */

Pensionary

Your answer is not wrong but you took wrong approach. Instead of disabling rule. You should go to refactor the code. – Residence

Answer 3

Alternatively modify the ternary operation to have a left hand side expression. Change this:

this.state.seconds % 59 === 0 && this.state.seconds !== 0 ? minute += 1:null;

To this:

minute = this.state.seconds % 59 === 0 && this.state.seconds !== 0 ? minute + 1:null;

Integration

Answer 4

I wouldn't disable the Eslint rule because it does make sense to raise it, but I think ternary conditions like yours are valid exceptions.

So personally, I would use the option allowTernary:

import eslint from '@eslint/js'

export default [
  eslint.configs.recommended,
  {
    rules: {
      'no-unused-expressions': ['error', { allowTernary: true }],

    // ...

or if you use Typescript:

import eslint from '@eslint/js'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      '@typescript-eslint/no-unused-expressions': ['error', { allowTernary: true }],

    // ...

Karoline