this.setState setting some values but not setting some other value

July 22, 2022

When I console.log(data, this.state.guestCanPause, this.state.isHost) the value for this.isHost changed to the correct value from data, but this.guestCanPause does not take the right value from data. I printed out the data and verified that the value in the data is correct.

    import React, { Component } from "react";
    import { useParams, useNavigate } from "react-router-dom";
    import { Grid, Button, Typography } from "@material-ui/core";

    function withHook(Component) {
    return function WrappedComponent(props) {
    const params = useParams();
    const navigate = useNavigate();
    return <Room {...props} roomCode={params.roomCode} {...{ navigate }} />;
    };
    }

    class Room extends Component {
    constructor(props) {
    super(props);
    this.state = {
      votesToSkip: 2,
      guestsCanPause: false,
      isHost: false,
    };
    this.roomCode = props.roomCode;
    this.getRoomDetails(this.roomCode);
    this.leaveButtonPressed = this.leaveButtonPressed.bind(this);
    }

    getRoomDetails() {
    fetch("/api/get-room" + "?code=" + this.roomCode)
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          votesToSkip: data.votes_to_skip,
          guestCanPause: data.guest_can_pause,
          isHost: data.is_host,
        }),
          console.log(data);
      });
     }

     leaveButtonPressed() {
     const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
    };
    fetch("/api/leave-room", requestOptions).then((_response) => {
      // this.props.leaveRoomCallback();
      this.props.navigate("/");
    });
    }
}
    export default withHook(Room);