Как мне скрыть div, инкапсулирующий компонент, из onClick внутри инкапсулированного компонента?

Question

В настоящее время у меня есть следующий код, в котором я отображаю карточку внутри div-элемента response-grid-layout, чтобы изменить его размер:

const Dashboard = () => {

  const [showCard, setShowCard] = React.useState(true)
  const closeCard = () => setShowCard(false)

  return (
    <div style = {{padding: "2%"}} >
      <ResponsiveReactGridLayout
        className = "layout"
        cols = {{ lg: 4, md: 2, sm: 1, xs: 1, xxs: 1 }}
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        rowHeight = {150}
        layouts={layouts}
      >
        { showCard ? <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 4, minW: 1, minH: 4, maxW: 4, maxH: 4}}>
          <PortfolioAssets onClose={closeCard} />
        </div> : null }
      </ResponsiveReactGridLayout>
    </div>
  )
}

onClose вызывается внутри инкапсулированного компонента PortfolioAssets onClick кнопки:

<IconButton 
  onClick = {props.onClose}
>
    <CloseIcon />
</IconButton>

Я хочу, чтобы этот div закрывался только при нажатии кнопки X (IconButton), а остальная часть страницы оставалась нетронутой:

{ showCard ? <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 4, minW: 1, minH: 4, maxW: 4, maxH: 4}}>
          <PortfolioAssets onClose={closeCard} />
        </div> : null }

Проблема в том, что всякий раз, когда я щелкните значок IconButton, он закроет все компоненты и div на всей странице. Каждый div и карточка на странице закрываются, и отображается только цвет фона. Я пробовал несколько разных способов, даже с использованием конструктора, но он все равно не работал. Я не уверен, что еще попробовать.

Любая помощь приветствуется.

Answer 1

Когда showCard имеет значение false, вы возвращаете нулевой дочерний элемент в компонент ResponsiveReactGridLayout, и кажется, что компонент пытается прочитать ключевой атрибут дочерних элементов, не проверяя, являются ли они пустыми. Похоже, для этого есть открытая проблема: https://github.com/STRML/react-grid-layout/issues/577

Обходной способ - вернуть фиктивный компонент с фиктивным ключом вместо null.

showCard ? <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 4, minW: 1, minH: 4, maxW: 4, maxH: 4}}> : <div key="dummy"/>