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

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