how to fix input checkbox requires doubleClick for the styling to be 'check'ed(React/JSX)?

Question

I tried searching around StackOverflow and it seems like people have this issue in JQuery but not in React (I'm using JSX).

So in componentWillMount(), I pretty much make an API call to my backend, pulled a bunch of stuff from the DB, and then map it to JSX. Like

var _this = this;
x = body.map(val =>
    <input type="checkbox" 
     checked={_this.state.roomChecked[val.Room_no]} 
      onChange={(event) => _this.addRoom(event, val.Room_no, _this.state.allPrices[val.Room_no])}/>

So far this renders and addRoom works, but the thing is that because checked is 'false', I have to map x with body in my addRoom method. Pretty much I saved the entire body and am doing this in my addRoom

addRoom(event, room, priceToAdd){
    event.preventDefault();
    //My Code Here
    x = this.state.savedBody.map(val =>
        <input type="checkbox" 
         checked={_this.state.roomChecked[val.Room_no]} 
          onChange={(event) => _this.addRoom(event, val.Room_no, _this.state.allPrices[val.Room_no])}/>

}

I checked the source code and when someone click the checkbox, the checkbox checked is set to true, but you have to click it again for the styling to show up and then you have to double click to remove the styling(the check in the checkbox).

Anyone have a single clue as to how I can fix this?

EDIT: pretty much in my render function I return x like this {this.x}, which is how JSX works lol

EDIT2: my entire addRoom code as requested

addRoom(event, room, priceToAdd){
    var _this = this;
    event.preventDefault();
    var total = 0;
    var x = '';
    if(this.state.roomChecked[room]){
      this.state.roomSelected.splice(this.state.roomSelected.indexOf(room), 1);
      total = this.state.totalPrice - priceToAdd;
      this.state.roomChecked[room] = false;
    }
    else {
      this.state.roomSelected.push(room);
      total = priceToAdd + this.state.totalPrice;
      this.state.roomChecked[room] = true;
    }
    x = this.state.theBody.map(val => 
      <div id="content_room">
        <div id="room_img">
          <Image
            src={require("../images/roomImages/room" + val.Room_no + ".jpg")}
            height={300}
            width={400}
          />
        </div>
        <div id="room_details">
          <h2 id="RoomType">{val.Room_Type}</h2>
          <span id="RoomCapacity">Guest Capacity: <span id="RoomCapacityNum">{val.Capacity}</span></span>
          <p id="RoomDescription">{val.Description}</p>
          <span id="RoomPrice">{_this.state.allPrices[val.Room_no]}<span id="RoomPriceTagline">USD/Night Excluding Tax & Fees</span></span>
          <div>
          <h4>Select</h4>
          <input type="checkbox" defaultChecked={_this.state.roomChecked[val.Room_no]} checked={_this.state.roomChecked[val.Room_no]} onChange={(event) => _this.addRoom(event, val.Room_no, _this.state.allPrices[val.Room_no])}/>
          <span className="checkmark"></span>
          </div> 
        </div>
      </div>
    );
    this.setState({ 
      totalPrice: total,
      rooms: x
    });
  }

Answer 1

This one stumped me for an hour, I had a same issue until I started looking into the actual life cycle of my mdl-switch component.

I called an event handler that, by default, used event.preventDefault() and removing that and calling it only when there was need fixed the problem for me.

The other thing I find with some frameworks is that you are required to call for updates to the dynamic/scripted components before they will display properly (mdl-textarea w/ hover is one), to solve this I add the following to the presentation component in React:

componentDidUpdate(){
        try{
            window.componentHandler.upgradeDom();
        } catch (err) {
            console.warn('Attempted upgrade of DOM before ready!');
        }
    }

That tends to 'refresh' the dyn comps and they work just fine after that!