Обрабатывать событие с функциональным компонентом React - получение неопределенной ошибки

Question

С компонентом класса я мог бы обработать событие, подобное коду ниже, без каких-либо проблем, но с функциональным компонентом я получил ошибку 'handleHover' is not defined no-undef.

Как я могу обрабатывать события при использовании функционального компонента Reijng

const NavBar = () => {

  handleHover = () => {
    // run code
  }

  return(
    <ul className="nav">
        <li>
          <a onMouseEnter={this.handleHover}>Products</a>
        </li>
    </ul> 
  )

}

export default NavBar;

Answer 1

У вас есть два пути (по крайней мере, я знаю xD):

function handleHover() {}

или

const handleHover = () => {}

Answer 2

Так как это не класс, вы должны удалить это перед именем функции. Также добавьте const перед объявлением функции.

const handleHover = () => {}
onMouseEnter={handleHover}