I want to change width of the StyledDivGrid component by clicking on it, but using this code, when I click on this div nothing happens. I can't realize what the problem is. Help, pls
const StyledDivGrid = styled.div`
display:flex;
flex-wrap: wrap;
width: ${props=>props.width};
height: 120px;
position: relative;
background-color: lightcoral;
`
function App() {
let [state, setState] = useState(
<StyledDivGrid width = {'120px'}></StyledDivGrid>
)
setState = () => {
<StyledDivGrid width = {'240px'}></StyledDivGrid>;
}
return (
<StyledDivGrid onClick = {() => setState()}>
</StyledDivGrid>
);
}
const StyledDivGrid = styled.div`
display:flex;
flex-wrap: wrap;
width: ${props=>props.width};
height: 120px;
position: relative;
background-color: lightcoral;
`
function App() {
const [width, setWidth] = useState("120px")
return (
<StyledDivGrid onClick={ () => setWidth("240px")} width={width}>
</StyledDivGrid>
);
}
Didn't check the code and I guess you are using styled-components , i hope this is useful