Why is the state only updated after the second click?

Question

React

There is a ChatContainer.

constructor(props) {
        super(props)
        this.openCurrentUserInfo = this.openCurrentUserInfo.bind(this)
        this.state = {
            showCurrentUserInfo: null
        }
    }

    

    openCurrentUserInfo(event, conversation, type) {
        this.setState({
            showCurrentUserInfo: conversation
        })
        console.log(this.state.showCurrentUserInfo)
    }

It has 2 components, I pass the openCurrentUserInfo function to these components, there are more components inside the components, in them I hang a function in which I execute openCurrentUserInfo on click. Why, on the first click, I have this.state.showCurrentUserInfo == null , and on the second click, it is already filled with values, so after the third click, the old values, after the fourth, new values. That is, to change the state, you need to click twice. What could be the problem ?

Answer 1

async openCurrentUserInfo(event, conversation, type) {
        await this.setState({
            showCurrentUserInfo: conversation
        })
        console.log(this.state.showCurrentUserInfo)
    }