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

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){
    //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