02.09 React State - bg color change with color picker (class components)

App preview:

Project files:

src/App.js

import React, { Component } from 'react'
import './App.css';

export class App extends Component {
  constructor(){
    super();
    this.state = {
      background: 'SkyBlue'
    }
  }

  handleBackroundChange(event){
    console.log(event.target.value);
    this.setState({background: event.target.value})
  }

  render() {
    return (
      <div className="App" style={{background: this.state.background}}>
        <h1>Hello World!</h1>
        <input type="color" onChange={(event)=>this.handleBackroundChange(event)}></input>
      </div>
    )
  }
}

export default App

src/App.css

.App {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

Blog

02.09 React State - bg color change with color picker (class components)

adriangheo

Join Our Newsletter. No Spam, Only the good stuff.

Related