React 状态更新只更新一个元素

Question

Not sure what causes this issue, When I change the state using useState, the element in which its called updates but the other doesnt (shown below). When I refresh the page, the correct one shows

<>
{
                        user.rank != "user" && user.username != username && userInfo.rank == "user" ? <div className="profile-btn" onClick={async () => {
                            let res = await PromoteToMod(username)
                            if(res.status == 'success')
                                setUserInfo(state => state.rank = 'mod')
                        }}>
                            <p>PROMOTE TO MOD</p>
                        </div>: <></>
                    }
                    {
                        user.rank != "user" && user.username != username && userInfo.rank == "mod" ? <div className="profile-btn" onClick={async () => {
                            let res = await DemoteToUser(username)
                            if(res.status == 'success')
                                setUserInfo(state => state.rank = 'user')
                        }}>
                            <p>DEMOTE TO USER</p>
                        </div>: < > < />
} 
</>

This is the return() from a react hook. the hook contains only one state, [userInfo, setUserInfo]. The userInfo is retrieved from the server thats why the correct sections shows when refreshed. But I want to update the two buttons (PROMOTE/DEMOTE) after a response is received from the server, hence the setUserInfo call.

Answer 1

Try the below approach,

{
     user.rank != "user" && user.username != username && userInfo.rank == "user" ? 
        <div className="profile-btn" onClick={async () => {
               let res = await PromoteToMod(username)
                  if(res.status == 'success')
                      setUserInfo(state => ({...state, rank:'mod'}));
                        }}>
               <p>PROMOTE TO MOD</p>
           </div>: <></>

}

similarly for rank: 'user'

  setUserInfo(state => ({...state, rank:'user'}));