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.