1
\$\begingroup\$

I am brand new to writing hooks and I am having a little trouble getting my head wrapped around it. Initially, I wanted to write this with one event listener that passed the event and a separate param to distinguish itself from the other incoming arguments.

With hooks, I was confused as to how I should pass a separate param and even more confused on how I would go about putting the logic into deciphering what each argument was.

So... Basically, I am calling two arrow functions in render and using separate arguments to dictate what iconType the onMouseOver is effecting.

I guess my question is, is this an acceptable way to write react hooks? This is my first component with any kind of state in my project (a simple navbar). I wan to make sure I am on the right path.

import React, { useState, useEffect } from 'react';
import '../styles/HomeNavBar.css';
import logo from '../styles/images/pulse_logo.png' // relative path to image 

export default function HomeNavBar() {

 const [isTrue, handleMouseOver] = useState(false)
 const [iconType, setArg] = useState('')

 return (
    <div id="navbar-container">
        <div className="image-holder">
          <img id="pulse-logo-nav" src={logo} alt={"pulse"}/> 
        </div>
      <nav id="navbar">
        <div onMouseEnter={() => handleMouseOver(true), () => setArg('services')} onMouseLeave = {() => handleMouseOver(false), () => setArg('')} className="link-holder">
            {isTrue === false && iconType !== 'services' ? <p>Services<i className="fas fa-arrow-circle-right"></i></p> : <p>Services<i className="fas fa-arrow-circle-down"></i></p>}
        </div>
        <div onMouseEnter={() => handleMouseOver(true), () => setArg('careers')} onMouseLeave = {() => handleMouseOver(false), () => setArg('')} className="link-holder">
          {isTrue === false && iconType !== 'careers'  ? <p>Careers<i className="fas fa-arrow-circle-right"></i></p> : <p>Careers<i className="fas fa-arrow-circle-down"></i></p>}
        </div>
        <div onMouseEnter={() => handleMouseOver(true), () => setArg('blog')} onMouseLeave = {() => handleMouseOver(false), () => setArg('')} className="link-holder">
            {isTrue === false && iconType !== 'blog'  ? <p>Blog<i className="fas fa-arrow-circle-right"></i></p> : <p>Blog<i className="fas fa-arrow-circle-down"></i></p>}
        </div>
        <div className="link-holder">
            <p>About</p>
        </div>
         <div className="social-media-div">
            <i className="fab fa-linkedin"></i>
            <i className="fab fa-facebook"></i>
        </div>
     </nav>
    </div>
  );
}
````
\$\endgroup\$
2
\$\begingroup\$

Probably the biggest issue I see here is naming. In particular, isTrue is very vague - perhaps is isHovered would be better? And conventionally you use set... rather than handle... with useState so this should be setIsHovered. Similarly, I think you should rename setArg to setIconType.

Also, I don't think you can pass 2 seperate functions as a prop. You maybe want to instead do this:

<div 
  onMouseEnter={() => {
    setIsHovered(true)
    setIconType('careers')
  }}
>
</div>

Other than that, it looks fine to me.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.