What I'm trying to do here is load the page with an input that can be selected or unselected and the value will be predefined from a database check. So I visit the database before the render is done and I return a true/false but whenever the true is selected I can see that the page loads before applying the changes I required. So if a button was supposed to be disabled then it would first load as it is and then the disabling would follow. So is there a way to ensure that the render method waits on my changes or is it just the logic? I'm confused.

This here is one instance, I have 3 currently in my code..

// added this variable to state

this.state = {
        verificationStatus: ''
    }

// getStatus function

    await Http.post({
        url: '/api/id-status-check',
        headers: {'user': localStorage.getItem('userId')}
    })
        .then((response)=>{
            verificationStatus = response.identificationStatus

            this.setState({verificationStatus: response.identificationStatus})

Then I'm trying to do something like this but the class is only removed after the page loads.

            if (this.state.verificationStatus.toLowerCase() !== 'failed') {
                dCheck.disabled = true
                dCheck.classList.remove('btn-primary2')

This is my componentDidMount function where I attempt to run the same function to get the status before the initial render. And btw the logic works to produce the output but only after the page loads so I can see the button color change on load which is my concern.

componentDidMount() {
    this.getStatus().then(r => {})
}