Color picker learning example

class.js

import React from "react";

class App extends React.Component {
  render() {
    const { redIntensity, greenIntensity, blueIntensity } = this.state;
    const { _setRedIntensity, _setGreenIntensity, _setBlueIntensity } = this;
    return (
      <div style={{ display: "flex", flexDirection: "row" }}>
        <div
          style={{
            width: 500,
            height: 500,
            backgroundColor: `rgb(${redIntensity}, ${greenIntensity}, ${blueIntensity})`,
          }}
        />
        <div style={{ display: "flex", flexDirection: "column" }}>
          <IntensityBox
            color="red"
            intensity={redIntensity}
            setIntensity={_setRedIntensity}
          />
          <IntensityBox
            color="green"
            intensity={greenIntensity}
            setIntensity={_setGreenIntensity}
          />
          <IntensityBox
            color="blue"
            intensity={blueIntensity}
            setIntensity={_setBlueIntensity}
          />
        </div>
      </div>
    );
  }

  constructor() {
    super();

    this.state = {
      redIntensity: 0,
      greenIntensity: 0,
      blueIntensity: 0,
    };

    this._setRedIntensity = this._setRedIntensity.bind(this);
    this._setGreenIntensity = this._setGreenIntensity.bind(this);
    this._setBlueIntensity = this._setBlueIntensity.bind(this);
  }

  _setRedIntensity(redIntensity) {
    this.setState({ redIntensity });
  }

  _setGreenIntensity(greenIntensity) {
    this.setState({ greenIntensity });
  }

  _setBlueIntensity(blueIntensity) {
    this.setState({ blueIntensity });
  }
}

export default App;

class IntensityBox extends React.Component {
  render() {
    const { color, intensity } = this.props;
    const { _onClick, _onContextMenu } = this;
    return (
      <div
        onClick={_onClick}
        onContextMenu={_onContextMenu}
        style={{
          backgroundColor: color,
          height: 250,
          width: 250,
        }}
      />
    );
  }

  constructor() {
    super();
    this._onClick = this._onClick.bind(this);
    this._onContextMenu = this._onContextMenu.bind(this);
  }

  _onClick() {
    const { setIntensity, intensity } = this.props;
    setIntensity(intensity === 255 ? 255 : intensity + 17);
  }

  _onContextMenu(event) {
    event.preventDefault();
    const { setIntensity, intensity } = this.props;
    setIntensity(intensity === 0 ? 0 : intensity - 17);
  }
}

hooks.js

import React, { useState } from "react";

function App() {
  const [redIntensity, setRedIntensity] = useState(0);
  const [greenIntensity, setGreenIntensity] = useState(0);
  const [blueIntensity, setBlueIntensity] = useState(0);

  return (
    <div style={{ display: "flex", flexDirection: "row" }}>
      <div
        style={{
          width: 500,
          height: 500,
          backgroundColor: `rgb(${redIntensity}, ${greenIntensity}, ${blueIntensity})`,
        }}
      />
      <div style={{ display: "flex", flexDirection: "column" }}>
        <IntensityBox
          color="red"
          intensity={redIntensity}
          setIntensity={setRedIntensity}
        />
        <IntensityBox
          color="green"
          intensity={greenIntensity}
          setIntensity={setGreenIntensity}
        />
        <IntensityBox
          color="blue"
          intensity={blueIntensity}
          setIntensity={setBlueIntensity}
        />
      </div>
    </div>
  );
}

export default App;

function IntensityBox({ color, intensity, setIntensity }) {
  const _onClick = () => {
    setIntensity(intensity === 255 ? 255 : intensity + 17);
  };

  const _onContextMenu = (event) => {
    event.preventDefault();
    setIntensity(intensity === 0 ? 0 : intensity - 17);
  };

  return (
    <div
      onClick={_onClick}
      onContextMenu={_onContextMenu}
      style={{
        backgroundColor: color,
        height: 250,
        width: 250,
      }}
    />
  );
}