How to use React/JSX to wait for React to load before styles are loaded?

Question

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

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

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

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.

Answer 1

To add inline styles to React elements, you should use the style attribute. so:

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

You cannot access DOM elements rendered on the component body, you should use ref and useEffect for this purpose.