Отслеживание выбранного div в сетке div с состоянием React

Question

Я новичок в React / JS и несколько дней пытался выяснить, как отследить, какой Коллекция выбран ниже.

Я хочу, чтобы пользователь мог щелкнуть по элементу collection и вызвать значок selected (закомментирован в коде, но я включил его в скриншоты) дляэта конкретная коллекция div. При нажатии на новый элемент div, исходный элемент div должен удалить значок, а недавно выбранный элемент div должен иметь новый значок. Другими словами, только одна коллекция должна иметь значок в любой момент времени. Я хочу отслеживать это в state компонента Collection (если нет лучшего способа).

Для справки, каждый collection div - это карта, которая выделяется при наведении курсора. Сайт также развернут по адресу https://gatsby -client.rishipr.now.sh / practice .

Collection.js

import React, { Component } from "react"

class Collection extends Component {
  render() {
    return (
      <div className="collection">
        <div className="collection-name">
          {this.props.name}{" "}
          {/* <span className="collection-selected-badge">SELECTED</span> */}
        </div>
        <div className="collection-description">{this.props.description}</div>
        <div className="collection-description">
          {this.props.numQuestions} questions
        </div>
      </div>
    )
  }
}

export default Collection

CollectionList.js

import React from "react"
import Collection from "./collection"

const CollectionList = props => {
  return (
    <div className="collections">
      <Collection
        name="All Questions"
        description="All questions (technical & behavioral)"
        numQuestions="400"
      />
      <Collection
        name="Top Behavioral"
        description="The most common behavioral questions to prepare for"
        numQuestions="21"
      />
      <Collection
        name="Outside the Guide"
        description="Questions from outside BIWS 400 and WSO"
        numQuestions="12"
      />
      <Collection
        name="20 Must Know Questions"
        description="The 20 must-know interview questions"
        numQuestions="20"
      />
      <Collection
        name="Real IB Interview Questions"
        description="Questions from real interviews at various banks"
        numQuestions="16"
      />
      <Collection
        name="Brain Teasers"
        description="Common brain teasers"
        numQuestions="4"
      />
    </div>
  )
}

export default CollectionList

Answer 1

Добавьте state к компоненту CollectionList, сохраняя имя выбранного Collection:

const CollectionList = props => {
  const [selected, setSelected] = useState(null);
  return (
  // ...
  )
}

Передайте реквизиты selected и setSelected всем вашим Collectioncomponent:

<Collection
  name="All Questions"
  description="All questions (technical & behavioral)"
  numQuestions="400"
  selected={selected}
  setSelected={setSelected}
/>

Добавьте метод onClick к внешнему div вашего Collection компонента, который устанавливает значение состояния selected равным name текущего Collection:

<div
  className="collection"
  onClick={() => this.props.setSelected(this.props.name)}
>
  // ...
</div>

Проверьте, совпадает ли selected реквизит с текущей коллекцией name в вашем Collection компоненте. Если true, отобразите selected badge:

{this.props.selected === this.props.name && (
  <span className="collection-selected-badge">SELECTED</span>
)}

Вот пример кодов и коробки , хотя и не такой красивый, как у предоставленного вами изображения.