Что происходит не так, когда я передаю логическое значение от дочернего к его родительскому компоненту с помощью React Hooks?

Question

В настоящее время я пытаюсь пересмотреть компонент выпадающего меню на моем сайте Gatsby, чтобы он сообщал логическое значение своему родительскому компоненту, панели навигации. Я планирую использовать это логическое значение для запуска некоторого условного CSS в Emotion.

Логическое значение isOpen сообщает, открыто или нет раскрывающееся меню, поэтому true означает, что оно открыто, а false означает, что это не так.

На данный момент я использую React Hooks для передачи этих данных от дочернего к родительскому компоненту. Похоже, что я успешно передаю данные, но когда я щелкаю раскрывающееся меню, он отправляет как истинное, так и ложное логическое значение в быстрой последовательности, даже если меню остается открытым.

Как мне изменить это код, чтобы isOpen в дочернем компоненте правильно сообщался родительскому компоненту?

import React, { useState, useEffect } from "react"

const Child = ({ isExpanded }) => {
  const [expandState, setExpandState] = useState(false)

  useEffect(() => {
    setExpandState(isOpen)
    isExpanded(expandState)
  })

  return(
    <dropdownWrapper>
      <button 
        {...isExpanded}
      />
      {isOpen && (
        <Menu>
          //menu items go here
        </Menu>
      )}
    </dropdownWrapper>
  )
}

const Parent = () => {
  const [expandState, setExpandState] = useState(false)

  const onExpand = (checkExpand) => {
    setExpandState(checkExpand)
  }

  return(
    <Dropdown 
     isExpanded={onExpand}
     onClick={console.log(expandState)}
    />
 )

}

Answer 1

понял это сам. Родителю нужен был useEffect для регистрации входящего логического значения.

Фиксированный код для родителя:

const Parent = () => {
  const [expandState, setExpandState] = useState(false)

  const onExpand = (checkExpand) => {
    setExpandState(checkExpand)
  }

  useEffect(() => {
    onExpand(expandState)
  })

  return(
    <Dropdown 
     isExpanded={onExpand}
     onClick={console.log(expandState)}
    />
 )

}