Переключить isActive className на элемент div внутри функции карты

Question

Итак, у меня есть куча элементов, сгенерированных внутри функции карты

{Items.map((item, i) => (
        <div className='nav col-4' key={i}>
          <div className={be('Items', 'item', props.isActive ? 'isActive' : '')} onClick={props.handleActive} key={title}>
            <span>{I18n.translate(`item.${title}`)}</span>
          </div>
        </div>
      ))}

класс props.isActive должен выделять только один элемент, по которому щелкнули.Теперь это подчеркивает их всех.Я знаю, как это сделать вне функции карты, но здесь я немного борюсь.

handleActive только переключает isActive часть состояния

Есть идеи?

Answer 1

   handleClick = (id) => {
    this.props.handleActive(id)

   }    



{Items.map((item, i) => (
            <div className='nav col-4' key={i}>
              <div className={be('Items', 'item', props.isActive ? 'isActive' : '')} onClick={()=>this.handleClick(i)} key={title}>
                <span>{I18n.translate(`item.${title}`)}</span>
              </div>
            </div>
          ))}

В родительском компоненте handleActive будет вызываться с идентификатором. Здесь вы можете установить isActive prop.

А в дочернем компоненте будет установлен элементк активному или неактивному

Answer 2

Вы тестируете один и тот же props.isActive для всех ваших предметов.вам нужно сохранить внутреннее состояние и состояние, по которому был нажат элемент.

props.isActive ? 'isActive' : ''