Problemas encontrados
Anteriormente a sua function handleChange
esperava receber no primeiro parametro o event
do onChange
e você não estava passando o mesmo para a function supracitada.
O seu estado color
é um objeto que contém propriedades (red, green e blue) com números atribuídos (por default todos são 0), na sua function handleChange
você usa o segundo parâmetro para definir dinamicamente o valor do atributo do seu objeto, portando você deveria informar as cores disponíveis (red, green ou blue).
Supondo que você estivesse passando o event
no primeiro parâmetro no onChange
, você estaria passando no segundo parâmetro valores numéricos e isso ocasionaria em problemas no seu funcionamento.
Novo código
Eu fiz algumas modificações no seu código para que funcionasse da maneira desejada.
availableColors
contém as cores disponíveis (red, green e blue) com base nas propriedades do seu estado colors;
handleChangeColorRange
é um currying ;
Iteramos a variável availableColors
para renderizar os inputs e passar os dados de acordo com a cor disponível.
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>
);
};