How can I reuse a Handlechange?

Question

I have this code here which changes the box color according to the range input, but instead of 3 handlechange would you like to do just one, how do I do that? So far my code is like this:

 let [color, setColor] = useState({
    red: 0,
    green: 0,
    blue: 0
  });
  
  let handleChange = (e, cor) => {
    let value = e.target.value
    setColor(
       color[cor] = {...color, [cor]:value }      
      
      )
  };


  return (
    <div className="selector">
      <h1>RGB COLOR CHANGER</h1>
      <div className="box" style={{ backgroundColor: `rgb(${color.red}, ${color.green}, ${color.blue})`}} />
      <h1>Selecione sua cor abaixo:</h1>
      R{" "}
      <input
        type="range"
        name="red"
        id="red"
        min="0"
        max="255"
        value={color.red}
        onChange={()=> handleChange(color.red)}

Answer 1

Problems encountered

Previously on your Function handleChange expected to receive in the first parameter the event of onChange and you were not passing the same to the aforementioned Function.

Your state color is an object that contains properties (red, green and blue) with assigned numbers (by default all are 0), in its Function handleChange you use the second parameter to dynamically define the attribute value of your object, so you should enter the available colors (red, green or blue). Supposing you were passing the event in the first parameter in onChange, you would be passing the second parameter numerical values and this would cause problems in its operation.

New code

I made some modifications to your code to work the way you wanted.

availableColors contains the available colors (red, green and blue) based on the properties of their Colors state;

handleChangeColorRange is a currying ;

Iterate the variable availableColors to render the inputs and pass the data according to the available color.

import React, { useState } from "react";

const ChangeColors = () => {
  const [colors, setColors] = useState({
    red: 0,
    green: 0,
    blue: 0
  });

  const availableColors = Object.keys(colors);
  
  function handleChangeColorRange(color) {
    return event => {
      const { value } = event.target;

      setColors({ ...colors, [color]: value });
    };
  }

  return (
    <div className="selector">
      <h1>Selecione sua cor abaixo:</h1>
      <div
        className="box"
        style={{
          height: 100,
          backgroundColor: `rgb(${colors.red}, ${colors.green}, ${colors.blue})`
        }}
      />
      {availableColors.map(color => (
        <input
          key={color}
          type="range"
          name={color}
          id={color}
          min="0"
          max="255"
          value={colors[color]}
          onChange={handleChangeColorRange(color)}
        />
      ))}
    </div>
  );
};