I am working on a Frontend Mentor project and I am trying to pass the hover status from the parent component (App) to the child component (Listing).

You can see that I have created a state object called hover inside the App component and passed it to the Listing component but when the hover object updates the css style is not applied as it should be on the Typography element inside the Listing component. Or at least there isn't a re-render if it does.

App.js

  let [hover, updateHover] = useState(false);

  updateHover = () => {
    if(hover === false){hover = true; console.log(hover); return(0);}
      else{hover = false; console.log(hover); return;}
  }

  return (
    <ThemeProvider theme={ theme }>
      <div style={{backgroundColor:'hsl(180, 52%, 96%)',}}>
        <div style={{backgroundImage:`url(${headerImage})`, backgroundSize:'cover', height:'10rem'}}></div>
        <Box display="flex" justifyContent="center" alignItems="center">
          <Box style={{width:'70%', marginTop:'5rem'}}>
            <Card style={styles.listing} onm ouseEnter={updateHover} onm ouseLeave={updateHover}>
              <CardActionArea href="#" className="listingHover">
                <Listing id="one" hover={hover} />
              </CardActionArea>
            </Card>
          </Box>
        </Box>
      </div>
    </ThemeProvider>
  );
}

export default App;

Listing.js

function Listing(props) {
    let id = props.id
    let hover = props.hover

    return (
        <React.Fragment>
            <Box className="listing" display="flex" sx={{backgroundColor:'#fff', width:'100%', height:'7.3rem'}}>
                    <Box>
                        <Typography variant="h4"><Link className={hover ? 'jobTitle': null} href="#" color="secondary" underline="none">{jobs[id].name}</Link></Typography>
                    </Box>
                </Box>
            </Box>
        </React.Fragment>
    )
}

export default Listing

CodePudding user response：

You are wrong change state in the React. Try like this.

const [hover, setHover] = useState(false);
  updateHover = () => {
    setHover(!hover)
  }

or

const [hover, setHover] = useState(false);

return (
    <ThemeProvider theme={ theme }>
      <div style={{backgroundColor:'hsl(180, 52%, 96%)',}}>
        <div style={{backgroundImage:`url(${headerImage})`, backgroundSize:'cover', height:'10rem'}}></div>
        <Box display="flex" justifyContent="center" alignItems="center">
          <Box style={{width:'70%', marginTop:'5rem'}}>
            <Card style={styles.listing} onm ouseEnter={() => setHover(true)} onm ouseLeave={() => setHover(false)}>
              <CardActionArea href="#" className="listingHover">
                <Listing id="one" hover={hover} />
              </CardActionArea>
            </Card>
          </Box>
        </Box>
      </div>
    </ThemeProvider>
  );

CodePudding user response：

I think your problem here is that you re declared updateHover.

You should change the name and have something like

const [hover, setHover] = useState(false);

const updateHover = () => {
   if (!hover) {
      console.log(hover);
      setHover(true);
      return(0)
   } else {
     setHover(false)
     return;
   }
}

as an aside why are you returning from the function? do you need the console.log? a cleaner option would be

const [hover, setHover] = useState(false);

  const updateHover = () => setHover(!hover) // flips the current value i.e  same as if (hover === true) setHover(false) else setHover(true);

  return (
    <ThemeProvider theme={ theme }>
      <div style={{backgroundColor:'hsl(180, 52%, 96%)',}}>
        <div style={{backgroundImage:`url(${headerImage})`, backgroundSize:'cover', height:'10rem'}}></div>
        <Box display="flex" justifyContent="center" alignItems="center">
          <Box style={{width:'70%', marginTop:'5rem'}}>
            <Card style={styles.listing} onm ouseEnter={updateHover} onm ouseLeave={updateHover}>
              <CardActionArea href="#" className="listingHover">
                <Listing id="one" hover={hover} />
              </CardActionArea>
            </Card>
          </Box>
        </Box>
      </div>
    </ThemeProvider>
  );
}