Questions & Answers

I'm trying to make a get request from an api using axios + eventListeners because I only want the data to be loaded on my screen AFTER I click on an especific button. Everything was working out fine before I tried to add the eventListener logic, now I simply don't get aby results from the api (plus, no errors are shown in the console). this is my code:

const[game,setGame]= React.useState([]);
    
    React.useEffect(()=>{
            axios.get("http://localhost:8080/games/1").then((response)=>{
            setGame(response.data);
            });
    }, []);
    if (!game) return null;
    
    window.onload=function(){
        let button = document.getElementById("button");
        button.addEventListener('click', ()=>{
            game.map((game, index) => {
                return(
                    <>
                        <p className="n1">{game}</p>
                    </>
                )
            });
        })
    }

and, on the same page, this is the code for the button that I'm trying to make it work:

<a href="#" className="button" id="button" >
     <p className="bttn-p" >GERAR NÚMEROS</p>
</a>

This is my first time using eventListeners and I'm actually kind of new at react so if anyone knows anything that could help I'd be extremely grateful :D