I want to change color of box randomly when button is clicked. But when I click on button background becomes white. I dont know the reason i am color flipper project and got stuck here. I checked console their color values are generating but it is not getting assigned to background-color: property.
import React,{useState} from 'react'
import styled from 'styled-components'
function Box() {
function randomRGB(){
// console.log("random");
return Math.floor(Math.random() * 256);
}
function getRandomColor() {
const color ='rgb(' + randomRGB() + ',' + randomRGB() + ',' + randomRGB() + ')';
console.log(color);
return color;
}
var [currentColor, setCurrentColor] = useState(getRandomColor());
return (
<div>
<BoxC back={currentColor}></BoxC>
<Div onClick={setCurrentColor}>Button</Div>
</div>
)
}
var BoxC = styled.div`
width: 200px;
height: 200px;
background: ${(props) => props.back};
`
const Div = styled.button`
width: 70px;
height: 50px;
border: 2px solid green;
cursor: pointer;
`
export default Box
You have to assign a new color on click by
onClick={()=>setCurrentColor(randomrgb())}>Button</Div>
You are not setting the currentColor state to anything. You are just calling the function.
Do it like this instead:
import React,{useState} from 'react'
import styled from 'styled-components'
function Box() {
var [currentColor, setCurrentColor] = useState(getRandomColor());
function randomRGB(){
// console.log("random");
return Math.floor(Math.random() * 256);
}
function getRandomColor() {
const color ='rgb(' + randomRGB() + ',' + randomRGB() + ',' + randomRGB() + ')';
console.log(color);
return setCurrentColor(color);
}
return (
<div>
<BoxC back={currentColor}></BoxC>
<Div onClick={() => getRandomColor()}>Button</Div>
</div>
)
}
var BoxC = styled.div`
width: 200px;
height: 200px;
background: ${(props) => props.back};
`
const Div = styled.button`
width: 70px;
height: 50px;
border: 2px solid green;
cursor: pointer;
`
export default Box