Camper Leaderboard hover with React

Code Feedback
1

Hi,
Here my project


I’m trying to setup an hover
isHoverProp = this.eventHover
Thanks

2

It’s simply because you have a typo—all instances of eventhov in the InitHeaderTable stateless component should be eventHov instead.

Here is the corrected code that seems to work (I didn’t try to fix the spacing, it’s a bit strange):

const InitHeaderTable = ({
  eventHov, handle30, handleReqAlluser, reqAlluser, req30Days, isLoading, isHover 
}) => {
  const isReqAll = req30Days  ? 'border p-2 border-info'    : ''
  const isReq30  = reqAlluser ? 'border p-2 border-warning' : ''
  const isThBtn  = isHover    ? 'border-danger'             : ''
  return <tr>
    <th className='text-center'>Rank</th>
    <th className='text-left pl-9'>
      Camper Name 
      <span role='img' aria-label='loop'>🎖</span>
    </th>
    <th 
      className='text-center' >
      <a 
        onClick      = {  handle30 }
        onMouseEnter={eventHov       }
        onMouseLeave={eventHov       }
        className    = {  `${isReq30 } th-30 ${isThBtn }` } >
				30 best
      </a>
    </th>
    <th className='text-center'>
      <a 
        onClick   = {handleReqAlluser}
        onMouseEnter={eventHov       }
        onMouseLeave={eventHov       }
        className = { `${isReqAll} th-all-time` }>
        All time points
      </a>
    </th>
  </tr>

}

You may want to give a bit more detail and what you have tried in the future, I just happen to have an interest in React so I thought I would dig through the code as an exercise. I hope that helps. :slight_smile:

1 Like
3

I rewrite a party of the code, thanks