02.05 React State - font color switch (class components)

App preview:

Project files:

---

src/App.js:

import React from "react";
import "./App.css"

class App extends React.Component{
  state = {
    color: 'blue',
  };

  turnFontRed(){
    this.setState({ color: 'red'});
  }

  turnFontBlue(){
    this.setState({ color: 'blue'});
  }

  render(){
    return(
      <div className="app" style={{color: this.state.color}}>
        <h1>Text color is {this.state.color}.</h1>
        <button onClick={()=>{this.turnFontRed()}}>Turn font red</button>
        <button onClick={()=>{this.turnFontBlue()}}>Turn font blue</button>
      </div>
    )
  }
}

export default App;

---

src/App.css

.app{
    background-color: lightskyblue;
    padding: 20px 10px;
}