setState ({}) для одного элемента (div) onClick

Question

Здравствуйте, надеюсь, что все в порядке!

Я пытаюсь установить setState для div, который отображается с использованием .map(). Но когда я щелкаю по элементу, все состояние div обновляется.

То, что я пытаюсь сделать sh, это setState({}) только на нажатом div.

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

Мой код

constructor(props) {
    super(props)
    this.state = {
      isSubActive: (isMobile()) // will be true on mobile
    }
    this.toggleSub = this.toggleSub.bind(this)
  }

// handle submenu toggle
toggleSub = (e) => {
    const subState = this.state.isSubActive
    this.setState( prevState => ({
      isSubActive: !prevState.isSubActive
    }))
  }

// element in submenu I want to toggle class for
const dropClass = this.state.isSubActive ? "is-dropped" : ""

<div data-id={`item-${i}`}
className={`navbar-item has-dropdown is-hoverable ${dropClass}`}
onClick={(isMobile()) ? e => this.toggleSub(e) : null} >

// .map func to render submenu items
 {data.map((menuItem, i) => {
    if (menuItem.childItems.nodes.length) {
         return this.renderSubMenu(menuItem, i)
      } else {
         return this.renderMenuItem(menuItem)
      }
    }
 )}

Answer 1

Я решил эту проблему!

Вместо логического значения я использовал числовое значение для отслеживания начального состояния isSubActive.

//init state
constructor(props) {
  super(props)
    this.state = {
      isNavTransparent: true,
      isMenuActive: false,
      isVip: "",
      isSubActive: 0,
    }
    this.toggleSub = this.toggleSub.bind(this)
  }

// handle onClick
toggleSub = (i, id) => {
    this.setState({
      isSubActive: id,
    })
  }

// const for className
const dropClass = this.state.isSubActive === menuItem.id ? "" : "is-dropped"

// nav element with onClick
<div className={`navbar-item has-dropdown is-hoverable ${dropClass}`}
onClick={isMobile() ? i => this.toggleSub(i, menuItem.id) : null} >
{menu items in here}
</div>

// .map func to render submenu items
 {data.map((menuItem, i) => {
    if (menuItem.childItems.nodes.length) {
         return this.renderSubMenu(menuItem, i)
      } else {
         return this.renderMenuItem(menuItem)
      }
    }
 )}

.