02.10 React State - bg color change with color picker (functional components)

App preview:

Project files:

src/App.js

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

const App = () => {

  const [background, changeColor] = useState("lightBlue");

  const handleBackroundChange = (event) => {
    console.log(event.target.value);
    changeColor( event.target.value)
  }

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

}

export default App

src/App.css

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

Blog

02.10 React State - bg color change with color picker (functional components)

adriangheo

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

Related