Using a switch statement inside an Event Handler in React

I´m trying to simplify my code. Currently, lots of “if” statement which I want to turn into a switch case. The biggest one seems to be the operations one. I thought about setting up a classname in the operations buttons and using that in the else if. Unfortunately, setting up a variable (eg, operations=document.getElementByClassName(“operations”) doesn´t work since it doesn´t return an individual item, rather a NodeList. Using “indexOf” didn´t work either. Any ideas?

class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = {value:0,decimal: false}
  this.handleClick = this.handleClick.bind(this);

      }
  handleClick(evt) {
    const id = evt.target.id;
    const result = evt.target.value;

    if (id === "clear") {
      this.setState({ value: 0, decimal: false });
    } 
    else if (id === "equals") {
      const res = math.eval(this.state.value);
      this.setState(prevState => ({
        value: res,
        decimal: false
      }));
    } 
    else if (id === "decimal") {
      this.setState({ decimal: true });

      if (!this.state.decimal) {
        this.setState(prevState => ({
          value: prevState.value + result
        }));
      }
    } 
    else {
      if (
        id === "add" ||
        id === "subtract" ||
        id === "multiply" ||
        id === "divide"
      ) {
        this.setState({
          decimal: false
        });
      }
      this.setState(prevState => ({
        value: `${prevState.value}${result}`
          .replace(/([/+\-/*=])([/+\-*=])/g, "$2")
          .replace(/^0+(?=[1-9])/, "")
          .replace(/^0+(?=\.)/, "0")
          .replace(/^0+\B/, "")
      }));
    }
  }

render() {
    return(
            <div id="container">
                <Display value={this.state.value} />
                <div>
                <Button onClick={this.handleClick} id="one" value={'1'} />
                <Button onClick={this.handleClick} id="two" value={'2'}/>
                <Button onClick={this.handleClick} id="three" value={'3'} />
                <Button onClick={this.handleClick} id="divide" value={'/'} />
                </div>
                <div>
                <Button onClick={this.handleClick} id="four" value={'4'} />
                <Button onClick={this.handleClick} id="five" value={'5'} />
                <Button onClick={this.handleClick} id="six" value={'6'} />
                <Button onClick={this.handleClick} id="add" value={'+'} />
                </div>
                <div>
                <Button onClick={this.handleClick} id="seven" value={'7'} />
                <Button onClick={this.handleClick} id="eight" value={'8'}  />
                <Button onClick={this.handleClick} id="nine" value={'9'} />
                <Button onClick={this.handleClick} id="subtract" value={'-'} />
                </div>
                <div>
                <Button onClick={this.handleClick} id="zero" value={'0'} />
                <Button onClick={this.handleClick} id="decimal" value={'.'} />
                <Button onClick={this.handleClick} id="equals" value={'='} />
                <Button onClick={this.handleClick} id="multiply" value={'*'} />
                </div>
                <div>
                <Button onClick={this.handleClick} id="clear" value={'clear'}  />
                </div>
            </div>
)


}

I tried this, but didn´t work:

handleClick(evt,id) { const id = evt.target.id; const result = evt.target.value; switch(id){ case"clear": this.setState({ value: 0, decimal: false }); break; (all operations) default: this.setState(prevState =&gt; ({ value:  `${prevState.value}${result}` .replace(/([/+\-/*=])([/+\-*=])/g, "$2") .replace(/^0+(?=[1-9])/, "") .replace(/^0+(?=\.)/, "0") .replace(/^0+\B/, "") })) }

try using

handleClick(evt){
 const id = evt.target.getAttribute("id");
}

also, try using console.log(id) to see every time u press the button, if it logs in the console. its a great way to see where your code goes wrong. Sometimes if you arent sure if your code is doing what it is supposed to, use console.log to see if its doing what its supposed to. for example,

handleClick(evt){
 const id = evt.target.getAttribute("id");
console.log(id)
}

then you press the button 7, it should log “seven” in ur console.
Hope this helped!

Thanks, that does seem to work. But I keep getting a parsing error in this line:

default: this.setState(prevState =&gt; ({ value:  `${prevState.value}${result}` .replace(/([/+\-/*=])([/+\-*=])/g, "$2") .replace(/^0+(?=[1-9])/, "").replace(/^0+(?=\.)/, "0") .replace(/^0+\B/, "") })) 

Error being:

  Line 18:  Parsing error: Unexpected token

  16 | switch(id){ case"clear": this.setState({ value: 12, decimal: false });
  17 | break;
> 18 | default: this.setState(prevState =&gt; ({ value:  `${prevState.value}${result}` .replace(/([/+\-/*=])([/+\-*=])/g, "$2") .replace(/^0+(?=[1-9])/, "").replace(/^0+(?=\.)/, "0") .replace(/^0+\B/, "") }))
     |                                   ^
  19 | }
  20 | }
  21 | render() {

Replace =&gt; with =>.

default: this.setState(prevState => ({ value...

OK, current situation. In this (rather ugly) piece of code, everything works properly: the operations work as intended, and the decimal point gets “blocked” (eg, can´t use “…” after inputting an number) everytime a number gets entered:

class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = {value:0,decimal: false}
  this.handleClick = this.handleClick.bind(this);

      }
  handleClick(evt) {
    const id = evt.target.id;
    const result = evt.target.value;

    if (id === "clear") {
      this.setState({ value: 0, decimal: false });
    } 
    else if (id === "equals") {
      const res = math.eval(this.state.value);
      this.setState(prevState => ({
        value: res,
        decimal: false
      }));
    } 
    else if (id === "decimal") {
      this.setState({ decimal: true });

      if (!this.state.decimal) {
        this.setState(prevState => ({
          value: prevState.value + result
        }));
      }
    } 
    else {
      if (
        id === "add" ||
        id === "subtract" ||
        id === "multiply" ||
        id === "divide"
      ) {
        this.setState({
          decimal: false
        });
      }
      this.setState(prevState => ({
        value: `${prevState.value}${result}`
          .replace(/([/+\-/*=])([/+\-*=])/g, "$2")
          .replace(/^0+(?=[1-9])/, "")
          .replace(/^0+(?=\.)/, "0")
          .replace(/^0+\B/, "")
      }));
    }
  }

render() {
    return(
            <div id="container">
                <Display value={this.state.value} />
                <div>
                <Button onClick={this.handleClick} id="one" value={'1'} />
                <Button onClick={this.handleClick} id="two" value={'2'}/>
                <Button onClick={this.handleClick} id="three" value={'3'} />
                <Button onClick={this.handleClick} id="divide" value={'/'} />
                </div>
                <div>
                <Button onClick={this.handleClick} id="four" value={'4'} />
                <Button onClick={this.handleClick} id="five" value={'5'} />
                <Button onClick={this.handleClick} id="six" value={'6'} />
                <Button onClick={this.handleClick} id="add" value={'+'} />
                </div>
                <div>
                <Button onClick={this.handleClick} id="seven" value={'7'} />
                <Button onClick={this.handleClick} id="eight" value={'8'}  />
                <Button onClick={this.handleClick} id="nine" value={'9'} />
                <Button onClick={this.handleClick} id="subtract" value={'-'} />
                </div>
                <div>
                <Button onClick={this.handleClick} id="zero" value={'0'} />
                <Button onClick={this.handleClick} id="decimal" value={'.'} />
                <Button onClick={this.handleClick} id="equals" value={'='} />
                <Button onClick={this.handleClick} id="multiply" value={'*'} />
                </div>
                <div>
                <Button onClick={this.handleClick} id="clear" value={'clear'}  />
                </div>
            </div>
)

}

I´m trying to rewrite this to a more elegant code, using a switch statement. Unfortunately, this doesn´t seem to work properly. The decimal point gets blocked altogether (can´t click it not even once):

handleClick(evt) {
    const id = evt.target.id;
    const result = evt.target.value;

switch(id) {
    case 'clear':
        this.setState({ value: 0, decimal: false });
        break;
    case 'equals':
     const res = math.eval(this.state.value);
      this.setState(prevState => ({
        value: res,
        decimal: false
      }));
        break;
    case 'subtract':
    case 'add':
    case 'multiply':
    case 'divide':
      this.setState(prevState => ({
        value: `${prevState.value}${result}`
          .replace(/([/+\-/*=])([/+\-*=])/g, "$2")
          .replace(/^0+(?=[1-9])/, "")
          .replace(/^0+(?=\.)/, "0")
          .replace(/^0+\B/, "")
      }));
       this.setState({      
      decimal: false
        });
        break;
    case 'decimal':
    this.setState({ decimal: true });
    break;
    default: this.setState(prevState => ({
        value: `${prevState.value}${result}`
          .replace(/([/+\-/*=])([/+\-*=])/g, "$2")
          .replace(/^0+(?=[1-9])/, "")
          .replace(/^0+(?=\.)/, "0")
          .replace(/^0+\B/, "")
      })); 
}

}

I figured the problem has to do with converting this line into the switch statement:

else if (id === "decimal") {
      this.setState({ decimal: true });

      if (!this.state.decimal) {
        this.setState(prevState => ({
          value: prevState.value + result
        }));
      }
    } 

How can I do that to maintain the same functionality?