I keep having this problem when using js/jsx/react, my logic is running before the page loads and therefore, I keep getting errors as to what is not my code Trying to execute before the page has finished loading, causing a lot of errors.

How do I consistently prevent this/protect myself from these problems?

I've tried using a bunch of window.onload() functions, but that just doesn't feel right and I feel like there should be a better way to do this, which I can't find by googling or on the form.< !-- p-->

// an example of my issue is the following code consistently errors: function Title() { var text = "Hello"; var arr = []; //convert word into an array of chars for (let i=0; i<=text.length; i ){ console.log("loop") arr.push(text.charAt(i)); } //output each letter into a span const listItems = arr.map((number) => {number}); //neither of these works // document.getElementById('title').style.color = ('rgba(0, 0, 0, 0.0)'); // document.getElementById('title').style.color = "#ffFFff" return ( 
{listItems}
 ) }

A bug I often get is that react claims that the jsx declared style I'm trying to change/access "doesn't exist", but if I try to change it in the browser's console it works fine.