OnMouseEnter enter change background color react-CodePudding

Attempting to change the background color of a Grid section on mouse enter. Here's where I am at but now am stuck. I figured I could call a function to change the bg color on mouse enter.

const [isShown, setIsShown] = React.useState(false)
function changeBackground(e) {
e.target.style.background = 'red';




 <Grid
            onm ouseEnter={() => setIsShown(true)}
            onm ouseLeave={() => setIsShown(false)} 
            container {...isShown && {changeBackground}} >
GRID ITEM

    </Grid>

CodePudding user response：

You could use the style prop on your Grid and it should work fine.

const [isShown, setIsShown] = React.useState(false)
function changeBackground(e) {
e.target.style.background = 'red';

 <Grid
      onm ouseEnter={() => setIsShown(true)}
      onm ouseLeave={() => setIsShown(false)} 
      style={{ width: "120px", height: "120px", 
      backgroundColor:isShown? "red" : ""  }} 
</Grid>