I'm trying to get some data with the fetch method from a web route, but the problem is that fetch is async so the result is displayed before my fetch is finished. Is there anyway to wait until the fetch is finished before continuing the code ? I've tried async and await but it doesn't resolve my problem.

        if(this.state.loading) {
            return(<div>Loading ...</div>)
        }
        this.tagNameMemory();
    return (
    <div>
        <div id = "tagName">
            {console.log("display : "+this.state.tagName)}
            <h1>{this.state.tagName}</h1>
        </div>
        ...


    async tagNameMemory() {
        console.log("tag : " + this.props.tag);
        await this.fetchTagName();
    }
    
    async fetchTagName() {
        return await fetch("fetchTagInformation/"+this.props.tag)
        .then( response => { return response.json();})
        .then( json => {
        this.state.tagName = json.listTags.name;
        console.log("tagName after fetch : "+this.state.tagName);
        })   
    }


  console on website : https://i.stack.imgur.com/omB2s.png