React Training lab iteration 16 solution proposal

ColorSquare.jsx

const ColorSquare = (props) => {
  return (
    <div
      style={{
        display: 'block',
        width: '2em',
        height: '2em',
        backgroundColor: `rgb(${props.r}, ${props.g}, ${props.b})`,
      }}
    ></div>
  );
};

export default ColorSquare;

RGBColorPicker.jsx

import { useState } from 'react';
import ColorSquare from './ColorSquare';
import SingleColorPicker from './SingleColorPicker';

const RGBColorPicker = () => {
  const [rValue, setRValue] = useState(255);
  const [gValue, setGValue] = useState(255);
  const [bValue, setBValue] = useState(255);

  return (
    <div>
      <SingleColorPicker color="r" value={rValue} onChange={setRValue} />
      <SingleColorPicker color="g" value={gValue} onChange={setGValue} />
      <SingleColorPicker color="b" value={bValue} onChange={setBValue} />
      <ColorSquare r={rValue} g={gValue} b={bValue} />
      <span>
        rgb({rValue}, {gValue}, {bValue})
      </span>
    </div>
  );
};

export default RGBColorPicker;

SingleColorPicker.jsx

import ColorSquare from './ColorSquare';

const SingleColorPicker = (props) => {
  const handleValueChange = (event) => {
    const value = event.target.valueAsNumber;
    props.onChange(Number.isNaN(value) ? 0 : value);
  };

  return (
    <div>
      <ColorSquare
        r={props.color === 'r' ? props.value : 0}
        g={props.color === 'g' ? props.value : 0}
        b={props.color === 'b' ? props.value : 0}
      />
      <span>{props.color.toUpperCase()}:</span>
      <input
        type="number"
        min="0"
        max="255"
        value={props.value}
        onChange={handleValueChange}
      />
    </div>
  );
};

export default SingleColorPicker;