I'm a newbie and learning ReactJS and doing a little project.

I have two buttons On/Off and when I click on "the light is on" should render on the screen, when I click off "the light is off" should render on the screen.

Right now when I click off it renders off, but when I click it again it renders on, which is not correct. When it's off, when I click the on button, on does not render, which is also not correct.

I think what's happening is when I click the off button, it changes the state to false then back to true because I'm using a '!' operator in setState. 

I'm sure this is a simple issue to fix, but having trouble with it.

Any ideas?

```
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import "./index.css";

class Room extends React.Component {
  constructor() {
    super();
    this.state = {
      isLit: true,
      isOn: true
    };
  }

  flipLight = () => {
    this.setState({
      isLit: !this.state.isLit
    });
  };

  turnOn = () => {
    this.setState({
      isOn: this.state.isOn
    });
  };

  turnOff = () => {
    this.setState({
      isOn: !this.state.isOn
    });
  };

  render() {
    const bright = this.state.isLit ? "lit" : "dark";
    console.log(this.state.isOn);

    return (
      <div className={`room ${bright}`}>
        the room is {this.state.isLit ? "lit" : "dark"} <br />
        the light is {this.state.isOn ? "on" : "off"} <br />
        <button onClick={this.flipLight}>Change State</button>
        <br />
        <button onClick={this.turnOn}>On</button>
        <button onClick={this.turnOff}>Off</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Room />, rootElement);

```