javascript - Expected an assignment or function call and instead saw an expression no-unused-expressions in handleDecrement()

Question

// Counters component

import React, { Component } from 'react';
import Counter from './counter'

class Counters extends Component {
    
    state = {
        counters: [
            {id:1  , value : 3},
            {id:2  , value : 0},
            {id:3  , value : 0},
            {id:4  , value : 0}
        ]
    }

    handleReset = () => {
       const counters = this.state.counters.map(counter=>{
            counter.value = 0
            return counter
        })

        this.setState({counters})
    }

    handleDelete = counterID=> {
          this.setState({counters : this.state.counters.filter(c=>c.id !== counterID)})
    }

    handleIncrement = counter => {
        const counters = [...this.state.counters]
        const index = counters.indexOf(counter)
        counters[index] = {...counter}
        counters[index].value++
        this.setState({counters})
        
     }
     **handleDecrement = counter => {
        const counters = [...this.state.counters]
        const index = counters.indexOf(counter)
        counters[index] = {...counter}
        if(counters[index].value <= 0){
            counters[index].value === 0
            this.setState({counters})
        }else {
            counters[index].value--
            this.setState({counters})
        }
        
     }**

    //  handleDecrement = ()=> {
    //      if(this.props.counter.value <= 0)
    //          this.setState({value : 0})
    //      else
    //          this.setState({value : this.props.counter.value - 1})
         
        
    //  }

    

    render() {
        return (
            <div>
                  <button onClick={this.handleReset} className="btn btn-primary btn-sm m-2">
                      Reset
                  </button>

                 {this.state.counters.map(counter=> 
                 <Counter onIncrement={this.handleIncrement} onDecrement={this.handleDecrement} onDelete={this.handleDelete} key={counter.id} counter={counter} >
                 </Counter>)}
            </div>
        );
    }
}

export default Counters;


// Counter component

import React , { Component }  from 'react'
import { Button } from 'react-bootstrap'


// first component

class Counter extends Component {
    

render(){
           
       return (
            <div>  
             <span className={this.getBadgeClasses()}>{this.formatCounter()}</span>
                <Button onClick={()=>this.props.onIncrement(this.props.counter)} variant="secondary" className="btn btn-sm ml-3" >Increment</Button>
                <Button onClick={()=>this.props.onDecrement(this.props.counter)} variant="secondary" className="btn btn-sm ml-3" >Decrement</Button>
                <Button onClick={()=>this.props.onDelete(this.props.counter.id)} className="btn btn-danger m-2">
                       Delete
                </Button>
            </div>
        )
     }

    getBadgeClasses() {
        let classes = "badge m-2 badge-";
        classes += (this.props.counter.value === 0) ? "warning" : "primary";
        return classes;
    }

     formatCounter(){
         const { value } = this.props.counter
         return value === 0 ? 'Zero' : value      
    }
    
}

export default Counter

question from:https://stackoverflow.com/questions/65897531/expected-an-assignment-or-function-call-and-instead-saw-an-expression-no-unused

Answer 1

Waitting for answers