React Hooks - Did I write this correctly?

Question

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>
  );
}
````

Answer 1

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.