My React button is only working once, then no longer runs

Question

I've been learning react recently and I am close to finishing a simple dice game (where 2 dice are rolled, and it announces which player won). However, when I run my code, the function in the button will only run one time, and the name does not update. I suspect this is because I'm not actually forcing the h1 to update(as react only updates the DOM when you've really specifically given it something that is being updated directly). However, I'm not sure what to do. I know that there are more efficient ways to make this, but for where I am at now in my learning, please try to refrain from telling me the better way to do it, but how I could improve my own version.

Edit: removing this code snippet allows me to run the function perfectly as intended( as many times as I want without breaking), but with it, I can only push the button once before it breaks, this is found near the bottom of my getNum function:

if(randNum > randNum2) {
  this.setState = ({ winName: 'Player 1'});
} else if(randNum2 > randNum) {
  this.setState = ({ winName: 'Player 2'});
} else {
  this.setState = ({ winName: "No one"})
}

App.js:

import React from 'react'
import { Result } from './Results.js'

import dice1 from './assets/dice1.png';
import dice2 from './assets/dice2.png';
import dice3 from './assets/dice3.png';
import dice4 from './assets/dice4.png';
import dice5 from './assets/dice5.png';
import dice6 from './assets/dice6.png';


export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { image: dice1, image2: dice2, num1: 1, num2: 1, winName: 'Undecided'};
    this.getNum = this.getNum.bind(this);
  }

  getNum() {
    var randNum = Math.floor(Math.random() * 6) + 1;
    var randNum2 = Math.floor(Math.random() * 6) + 1;
    this.setState({ num1: randNum, num2: randNum2}); //sets num 1-6
    switch(randNum) {
      case 1: this.setState({ image: dice1, num1: randNum }); break;
      case 2: this.setState({ image: dice2, num1: randNum  }); break;
      case 3: this.setState({ image: dice3, num1: randNum  }); break;
      case 4: this.setState({ image: dice4, num1: randNum  }); break;
      case 5: this.setState({ image: dice5, num1: randNum  }); break;
      case 6: this.setState({ image: dice6, num1: randNum  }); break;
      default: return <h1>Something went wrong.</h1>
    }

    switch(randNum2) {
      case 1: this.setState({ image2: dice1, num2: randNum2  }); break;
      case 2: this.setState({ image2: dice2, num2: randNum2  }); break;
      case 3: this.setState({ image2: dice3, num2: randNum2  }); break;
      case 4: this.setState({ image2: dice4, num2: randNum2  }); break;
      case 5: this.setState({ image2: dice5, num2: randNum2  }); break;
      case 6: this.setState({ image2: dice6, num2: randNum2  }); break;
      default: return <h1>Something went wrong.(2)</h1>
    }

    if(randNum > randNum2) {
      this.setState = ({ winName: 'Player 1'});
    } else if(randNum2 > randNum) {
      this.setState = ({ winName: 'Player 2'});
    } else {
      this.setState = ({ winName: "Both Players"})
    }

  } 

  render() {
    return (
      <div className='entire-container'>
        <img src={this.state.image}/>
        <img src={this.state.image2}/>
        <div className='dice-container'>
          <button onClick={this.getNum}>Roll Dice</button>
        </div>
        <Result winner={this.state.winName}/>
      </div>
    )
  }
}

Results.js:

import React from 'react'

export class Result extends React.Component {
    constructor(props) {
        super(props);
        this.state = { winner: 'Undecided'};
    }

    render() {
        return (
        <div className='results-container'>
        <h1>| {this.props.winner} |</h1>
        <h1>is the winner!</h1>
        </div>
        )
    }
}

Current view(after running the function once): Screenshot of website

Answer 1

Try :

getNum =()=> { .... }

OR :

<button onClick={() => this.getNum()}>Roll Dice

Answer 2

This is because

if(randNum > randNum2) {
  this.setState = ({ winName: 'Player 1'});
} else if(randNum2 > randNum) {
  this.setState = ({ winName: 'Player 2'});
} else {
  this.setState = ({ winName: "No one"})
}

In this snippet, you are reassigning this.setState (which is a function) to an object.

this.setState = ({ winName: 'Player 1'}); 

because of this, when u are running it a second time, you can't call this function as it an object after reassigning Not a function.

Do it like this:

this.setState({ winName: 'Player 1'});

as u are doing earlier.

Here is an example of the error.

var fun = () => console.log("I am a function");
console.log(fun);
fun();

fun = ({val:1});
console.log(fun);
fun(); //<--- this will give error

Answer 3

You are not setting the state properly try this:

if(randNum > randNum2) {
      this.setState({...this.state, winName: 'Player 1'});
    } else if(randNum2 > randNum) {
      this.setState({...this.state, winName: 'Player 2'});
    } else {
      this.setState({...this.state, winName: "No one"})
    }

Answer 4

Try this I just changed this and its working as expected

import React from "react";
import { Result } from "./Results.js";

import dice1 from "../assets/dice1.png";
import dice2 from "../assets/dice2.png";
import dice3 from "../assets/dice3.png";
import dice4 from "../assets/dice4.png";
import dice5 from "../assets/dice5.png";
import dice6 from "../assets/dice6.png";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      image: dice1,
      image2: dice2,
      num1: 1,
      num2: 1,
      winName: "Undecided"
    };
    this.getNum = this.getNum.bind(this);
  }

  getNum = () => {
    var randNum = Math.floor(Math.random() * 6) + 1;
    var randNum2 = Math.floor(Math.random() * 6) + 1;
    // this.setState({ num1: randNum, num2: randNum2 }); //sets num 1-6
    switch (randNum) {
      case 1:
        this.setState({ image: dice1, num1: randNum });
        break;
      case 2:
        this.setState({ image: dice2, num1: randNum });
        break;
      case 3:
        this.setState({ image: dice3, num1: randNum });
        break;
      case 4:
        this.setState({ image: dice4, num1: randNum });
        break;
      case 5:
        this.setState({ image: dice5, num1: randNum });
        break;
      case 6:
        this.setState({ image: dice6, num1: randNum });
        break;
      default:
        return <h1>Something went wrong.</h1>;
    }

    switch (randNum2) {
      case 1:
        this.setState({ image2: dice1, num2: randNum2 });
        break;
      case 2:
        this.setState({ image2: dice2, num2: randNum2 });
        break;
      case 3:
        this.setState({ image2: dice3, num2: randNum2 });
        break;
      case 4:
        this.setState({ image2: dice4, num2: randNum2 });
        break;
      case 5:
        this.setState({ image2: dice5, num2: randNum2 });
        break;
      case 6:
        this.setState({ image2: dice6, num2: randNum2 });
        break;
      default:
        return <h1>Something went wrong.(2)</h1>;
    }

    if (randNum > randNum2) {
      this.setState({ ...this.state, winName: "Player 1" });
    } else if (randNum2 > randNum) {
      this.setState({ ...this.state, winName: "Player 2" });
    } else {
      this.setState({ ...this.state, winName: "No one" });
    }
  };

  render() {
    return (
      <div className="entire-container">
        <img src={this.state.image} />
        <img src={this.state.image2} />
        <div className="dice-container">
          <button onClick={this.getNum}>Roll Dice</button>
        </div>
        <Result winner={this.state.winName} />
      </div>
    );
  }
}