Color Theme Generator (Scooter 1/2)

App.js

import React, { useState } from "react"
import "./App.css"

const Color = props => {
  return (
    <div style={{ backgroundColor: props.color }}>
      <h1>{props.color}</h1>
    </div>
  )
}

const App = () => {
  const randomColor = () => `#${(Math.random().toString(16) + "000000").substring(2, 8)}`

  const [colors, setColors] = useState([randomColor(), randomColor(), randomColor()])

  const changeColors = () => {
    setColors([randomColor(), randomColor(), randomColor()])
  }

  return (
    <div className="App">
      <button onClick={changeColors}>Change Colors</button>
      { colors.map(color => <Color color={color} />) }
    </div>
  )
}

export default App