When pressed button in react, console log shows the result but page does not

Question

I am new to react and web. I have an issue when calling the function console shows it but i can not show it in my page.

            usePriest = (evt, id) => {
            const num = 3;

            const { rear,bottom2,bottom3,bottom,player1, player2, player3, player4, mycards } = this.state;

            var whichPlayer;
            switch(num){
              case 1:
                whichPlayer = player1[0];
                rear[1]=whichPlayer;
                rear[0]=card6;
                break;
              case 2:

                whichPlayer = player2[0];
                bottom[1]=whichPlayer;
                bottom[0]=card6;
                break;
              case 3:
                whichPlayer = player3[0];
                bottom2[1]=whichPlayer;
                bottom2[0]=card6;
                break;
              case 4:
                whichPlayer = player4[0];
                bottom3[1]=whichPlayer;
                bottom3[0]=card6;
                break;
            }
                // bottom[1]=whichPlayer;
                // bottom[0]=card6;
                // console.log(bottom);

          }

and i call my function in here

else if (mycards[0]==="/static/media/priest.ae71698d.jpg") {
          return ( <div>
            <button className="button_card1_use" onClick={(evt) => this.usePriest(evt, 1)}>Use</button>
                  <button className="button_card1_discard">Discard</button>
            <div className="about1"><p>Priest</p>
Player is allowed to see another player's hand.         </div></div>
        )
    } 

What should i return in function or do something in order to be able to show it on the page.

Answer 1

You just need to call a setState at the end of the function in order tot reflect the changes -:

usePriest = (evt, id) => {
        const num = 3;

        // your old code
        this.setState({ rear,bottom2,bottom3,bottom,player1, player2, player3, player4, mycards })

      }

Actually in JS things get copied by reference, so effectively we are mutating the state directly. This is a better solution for the same -:

usePriest = (evt, id) => {
        const num = 3;

        const { rear,bottom2,bottom3,bottom,player1, player2, player3, player4, mycards } = this.state;

        var whichPlayer;
        switch(num){
          case 1:
            this.setState({whichPlayer: player1[0], rear: [...rear, 0: card6, 1: whichPlayer]});
            break;
          case 2:
            this.setState({whichPlayer: player2[0], bottom: [...bottom, 0: card6, 1: whichPlayer]});
            break;
          case 3:
            this.setState({whichPlayer: player3[0], bottom2: [...bottom2, 0: card6, 1: whichPlayer]});
            break;
          case 4:
            this.setState({whichPlayer: player4[0], bottom3: [...bottom3, 0: card6, 1: whichPlayer]});
            break;
        }
   }