How can I create an alert during a function in React.js?

Question

I'm building a Rock Paper Scissors App in React.js after building one in Vanilla JS. I'm pretty much done version one, but I'm trying to add alerts (using React-bootstrap) that pop up when a selection is made and the function is run. I have tried putting it several places but I can't figure out where to put it.

import React, { Component } from "react";
import ReactInfo from "./ResultInfo";
import Button from "react-bootstrap/Button";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

class Counter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 10,
      ran: "",
      id: "",
      temp: Math.floor(Math.random() * 3 + 1),
      userPoint: 0,
      pcPoint: 0,
      roundLimit: 10,
      roundWinner: ""
    };

    this.lottery = this.lottery.bind(this);
  }

  lottery = (event, temp) => {
    const users_choice = event.currentTarget.id;
    this.setState({ id: users_choice });
    const PC_choice = ["Paper", "Rock", "Scissors"][
      Math.floor(Math.random() * 3)
    ];
    this.setState({ ran: PC_choice });
    console.log("pc; state =", this.state.ran, "but variable =", PC_choice);
    console.log("user: state =", this.state.id, "but variable =", users_choice);
    if (
      (users_choice === "Paper" && PC_choice === "Rock") ||
      (users_choice === "Rock" && PC_choice === "Scissors") ||
      (users_choice === "Scissors" && PC_choice === "Paper")
    ) {
      this.setState(({ userPoint, roundWinner }) => ({
        userPoint: userPoint + 1,
        roundWinner: "User",

      }

      ));
    } else if (users_choice === PC_choice) {

      this.setState(({ roundWinner }) => ({
        roundWinner: "Draw"
      }));

    } else {
      this.setState(({ pcPoint, roundWinner }) => ({
        pcPoint: pcPoint + 1,
        roundWinner: "PC"
      }));

    }
  };

  render(props) {
    return (
      <>
        <div className="container">
          <Container fluid>
            <Row>
              <Col>
                <h5>Rock, Paper, Scissors</h5>
              </Col>
            </Row>
            <Row>
              <Col>
                <h6> Select Your Weapon </h6>
              </Col>
            </Row>
            <Row>
              <Col>
                <Button
                  className="myButton"
                  variant="outline-primary"
                  size="md"
                  onClick={this.lottery}
                  id="Paper"
                >
                  Paper
                </Button>{" "}
              </Col>
            </Row>
            <Row>
              <Col>
                <Button
                  className="myButton"
                  variant="outline-primary"
                  size="md"
                  onClick={this.lottery}
                  id="Rock"
                >
                  Rock
                </Button>
              </Col>
            </Row>
            <Row>
              <Col>
                <Button
                  className="myButton"
                  variant="outline-primary"
                  size="md"
                  onClick={this.lottery}
                  id="Scissors"
                >
                  Scissors
                </Button>
              </Col>
            </Row>
          </Container>
        </div>

        <ReactInfo
          id={this.state.id}
          ran={this.state.ran}
          roundWinner={this.state.roundWinner}
          userPoint={this.state.userPoint}
          pcPoint={this.state.pcPoint}
        />
      </>
    );
  }
}

export default Counter;

Answer 1

Keep the AlertComponent inside the root component itself so that the overlay is applicable on the entire window. Also wrap it inside a flag which stays false initially, and set it to true only when you need to show.

        showAlert=()=>{
          this.setState({showAlert:true})
         }render(){
         {this.state.showAlert && <AlertComponent>}
        }