Quiero cambiar el color del cuadro al azar cuando se hace clic en el botón. Pero cuando hago clic en el botón, el fondo se vuelve blanco. No sé la razón por la que estoy en el proyecto Color Flipper y me quedé atascado aquí. Verifiqué en la consola que sus valores de color se están generando, pero no se asignan a la propiedad background-color:.
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 BoxTienes que asignar un nuevo color al hacer clic en
onClick={()=>setCurrentColor(randomrgb())}>Button</Div>No está configurando el estado de color actual en nada. Solo estás llamando a la función.
Hazlo así en su lugar:
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