how to have react wait until load with react / jsx for styling?

i'm consistently having this issue where with js/jsx/react, i am consistently running into this issue where my logic is running before the page loads, and because of that, i am consistently running into errors and what not as my code trys to execute before my page has finished loading resulting in a tonne of errors.

how do i consistently prevent this/prevent myself from running into these issues?

i've tried using a bunch of window.onload() functions but that feels wrong and i feel like there should be a better way to do so that' i'm unable to find with googling or on forms.

// 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) =>  <span>{number}</span>);

//neither of these work
    // document.getElementById('title').style.color = ('rgba(0, 0, 0, 0.0)');
    // document.getElementById('title').style.color = "#ffFFff" 

    return (
        <h1 id='title'>{listItems}</h1>
    )
}

the error i'm commonly getting is that react is claiming that the style i'm trying to change/access jsx claims "do not exists", but if i try change it in the console in the browser, it works fine.

To add inline styles to a react element you should use the style prop. This way:

<h1 id="title" style={{ color: "#fff" }}>{listItems}</h1>

You can't get access to the DOM element which is being rendered on the body of the component, you should instead use a ref and an useEffect for that purpose.