in

React on and off highlight


Happy new year everyone, i have a little problem with my code, I am having a hard time aligning my code from this, please see the link below,

https://codesandbox.io/s/list-highlight-demo-forked-ww0op

const [highlight, setHighlight] = useState(false)
const handleClick = (on) => {
    var on = false
    if(on){
      setHighlight(true)
    }else{
      setHighlight(false)
    }

  }
  return (
    <Paper
      sx={{ my: '1px', padding: '5px', pr: '15px' }}
      onClick={() => onClickLocation(location)}
    >
      <Stack direction="row" spacing={1} 
          onClick={() => handleClick()} 
          sx={{ bgcolor: highlight ? 'lightgrey' : 'unset' }}>
        <Divider
          orientation="vertical"
          flexItem={true}
          variant={'fullWidth'}
          sx={{
            bgcolor: selectedLocation ? '#E01C1C' : 'transparent',
            borderRadius: 8,
            borderWidth: 0,
            width: '3px',
          }}
        />
        <Box>
          <Typography variant="body" display="block">
            {' '}
            {location.address.street2}
          </Typography>
          <Typography variant="body" display="block">
            {' '}
            {location.address.city}, {location.address.state}{' '}
            {location.address.zipCode}
          </Typography>
        </Box>
      </Stack>
    </Paper>
  );



Source: https://stackoverflow.com/questions/70540618/react-on-and-off-highlight

Lua — No-code token minter for Polygon

Try What’s Good — A review site, without the reviews