Pure React, Chapter 11: Exercise at the end of the chapter. Is this a proper react way to pass the ID to the state ?

React-learning-States-and-events.js

const Room = ({onAction, room, children}) =>(
    <button id={room} onClick={onAction} >{children}</button>
)
class House extends React.Component {

    state = {
        rooms: {
            kitchen: true,
            bathroom: false,
            livingRoom: true,
            bedroom: false
        }
    }

    switchLight = (action)=>{
        let key = action.target.id;
        let newVal = !this.state.rooms[key];
        this.setState( (state,props) => {
            let newRooms = {...this.state.rooms};
            newRooms[key]= newVal;
            return {
                rooms: {...newRooms}
            }
        });
    }
    render(){
        return (
            <div className="house">
                <Room onAction={this.switchLight} room="kitchen">Kitchen</Room>
                <Room onAction={this.switchLight} room="bathroom">Bath  room</Room>
                <Room onAction={this.switchLight} room="livingRoom">Living Room</Room>
                <Room onAction={this.switchLight} room="bedroom">Bedroom</Room>

                <p>Kitchen light:  {this.state.rooms.kitchen ? 'on': 'off'}</p>
                <p>Bathroom light:  {this.state.rooms.bathroom ? 'on': 'off'}</p>
                <p>Living Room light:  {this.state.rooms.livingRoom ? 'on': 'off'}</p>
                <p>Bedroom light:  {this.state.rooms.bedroom ? 'on': 'off'}</p>
            </div>
        )
    }
}

This is good!

Since you're using the "updater" form of setState on line 18, you can (and should) use state in that function instead of this.state, and do any reading of state within that function as well. That's the only thing that stands out as potentially problematic. The intention behind using the function form is to avoid referencing a potentially-stale value of this.state

Here's how I'd probably write the switchLight function:

switchLight = action => {
  let key = action.target.id;
  this.setState(state => {
    return {
      // here you could spread `...state` but because setState will merge this object, you don't have to repeat the old values
      rooms: {
        // we DO need to spread `state.rooms` here because setState will only merge one level deep 
        // and without `...state.rooms`, this new `rooms` key would overwrite the old one, losing 3 of the rooms in the process
        ...state.rooms,
        [key]: !state.rooms[key]
      }
    };
  });
};

Hi @dceddia ! thank you for the feedback!
You mentioned the "updater" form also in the book without really explaining it, It's probably something really simple but I failed to understand what you meant by that. I googled aroundfor it but did not find any reference. Could you perhaps elaborate or point me to a valid source of info?
Thank you again!
A.