React Hooks - Did I write this correctly? 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 (
    &lt;div id="navbar-container"&gt;
        &lt;div className="image-holder"&gt;
          &lt;img id="pulse-logo-nav" src={logo} alt={"pulse"}/&gt; 
        &lt;/div&gt;
      &lt;nav id="navbar"&gt;
        &lt;div onMouseEnter={() =&gt; handleMouseOver(true), () =&gt; setArg('services')} onMouseLeave = {() =&gt; handleMouseOver(false), () =&gt; setArg('')} className="link-holder"&gt;
            {isTrue === false &amp;&amp; iconType !== 'services' ? &lt;p&gt;Services&lt;i className="fas fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/p&gt; : &lt;p&gt;Services&lt;i className="fas fa-arrow-circle-down"&gt;&lt;/i&gt;&lt;/p&gt;}
        &lt;/div&gt;
        &lt;div onMouseEnter={() =&gt; handleMouseOver(true), () =&gt; setArg('careers')} onMouseLeave = {() =&gt; handleMouseOver(false), () =&gt; setArg('')} className="link-holder"&gt;
          {isTrue === false &amp;&amp; iconType !== 'careers'  ? &lt;p&gt;Careers&lt;i className="fas fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/p&gt; : &lt;p&gt;Careers&lt;i className="fas fa-arrow-circle-down"&gt;&lt;/i&gt;&lt;/p&gt;}
        &lt;/div&gt;
        &lt;div onMouseEnter={() =&gt; handleMouseOver(true), () =&gt; setArg('blog')} onMouseLeave = {() =&gt; handleMouseOver(false), () =&gt; setArg('')} className="link-holder"&gt;
            {isTrue === false &amp;&amp; iconType !== 'blog'  ? &lt;p&gt;Blog&lt;i className="fas fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/p&gt; : &lt;p&gt;Blog&lt;i className="fas fa-arrow-circle-down"&gt;&lt;/i&gt;&lt;/p&gt;}
        &lt;/div&gt;
        &lt;div className="link-holder"&gt;
            &lt;p&gt;About&lt;/p&gt;
        &lt;/div&gt;
         &lt;div className="social-media-div"&gt;
            &lt;i className="fab fa-linkedin"&gt;&lt;/i&gt;
            &lt;i className="fab fa-facebook"&gt;&lt;/i&gt;
        &lt;/div&gt;
     &lt;/nav&gt;
    &lt;/div&gt;
  );
}
````
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:

&lt;div 
  onMouseEnter={() =&gt; {
    setIsHovered(true)
    setIconType('careers')
  }}
&gt;
&lt;/div&gt;


Other than that, it looks fine to me.