ok so im working on my first project in react, and im facing trouble with random button that i created.
the random button on the navbar supposed to generate numbers and insert it to the values of the inputs, and then the block changes it color by the values.
what happens is that it generate the values to the inputs on the first click, and then on the second click it changes the block color and the inputs.
so what happens is that the inputs matches the color of the next click.
export const ColorsProvider = (props) => {
const [color, setColor] = useState("");
const [red, setRed] = useState("");
const [green, setGreen] = useState("");
const [blue, setBlue] = useState("");
const [colors, setColors] = useState([]);
const changeColor = () => {
if (
red < 0 ||
red > 255 ||
green < 0 ||
green > 255 ||
blue < 0 ||
blue > 255 ||
!red ||
!green ||
!blue
) {
console.log("Input must be between 0 and 255");
} else {
setColor(`rgb(${red}, ${green}, ${blue})`);
setColors([...colors, color]);
}
};
return (
<ColorsContext.Provider
value={{
colorValue: [color, setColor],
redValue: [red, setRed],
greenValue: [green, setGreen],
blueValue: [blue, setBlue],
colorsArr: [colors, setColors],
clickHandler: changeColor,
}}
>
{props.children}
</ColorsContext.Provider>
);
};function Navbar() {
const {
colorValue,
redValue,
greenValue,
blueValue,
colorsArr,
clickHandler,
} = useContext(ColorsContext);
const [color, setColor] = colorValue;
const [red, setRed] = redValue;
const [green, setGreen] = greenValue;
const [blue, setBlue] = blueValue;
const [colors, setColors] = colorsArr;
const changeColor = clickHandler;
const generateNewColorOnClick = () => {
service.ColorsService.getRandomColor().then((color) => {
setColor(color.color);
let colorArray = color.color.split(",");
setRed(colorArray[0]);
setGreen(colorArray[1]);
setBlue(colorArray[2]);
changeColor();
});
};
return (
<section>
<div className="navbar-dark">
<div>
<a href="javascript:window.location.reload(true)">
<h1>Color Generator</h1>
</a>
</div>
<div>
<a className={"href"} onClick={generateNewColorOnClick}>
<h2>Random</h2>
</a>
</div>
</div>
</section>
);
}function ChooseColor() {
const {
colorValue,
redValue,
greenValue,
blueValue,
colorsArr,
clickHandler,
} = useContext(ColorsContext);
const [color, setColor] = colorValue;
const [red, setRed] = redValue;
const [green, setGreen] = greenValue;
const [blue, setBlue] = blueValue;
const [colors, setColors] = colorsArr;
const changeColor = clickHandler;
return (
<div className={"home"}>
<section>
<div className="container">
<div>
<p>Choose a color</p>
</div>
<div className="container-box" style={{ backgroundColor: color }} />
<div>
<div>
RGB <h3>between 0-255</h3>
</div>
<div className={"input"}>
<input
type="number"
placeholder="Red"
name="Red"
value={red}
max="255"
id="redValue"
onChange={(e) => setRed(e.target.value)}
/>
<input
type="number"
placeholder="Green"
name="Green"
value={green}
max="255"
id="greenValue"
onChange={(e) => setGreen(e.target.value)}
/>
<input
type="number"
placeholder="Blue"
name="Blue"
value={blue}
max="255"
id="blueValue"
onChange={(e) => setBlue(e.target.value)}
/>
</div>
</div>
<button className={"homeButton"} onClick={changeColor}>
Click to Generate
</button>
</div>
<History colors={colors} />
</section>
</div>
);
}