Работаете с индексом отображаемых элементов?

Question

У меня есть приложение React, которое показывает 12 элементов на странице.Каждый элемент поступает из массива, и я использую метод map для отображения их на странице.Чтобы создать это, я создал класс с именем Tags:

export default class Tags {
public title: string;
public id: string;
public active: boolean;

constructor(title: string, id: string, active: boolean) {
    this.title = title;
    this.id = id;
    this.active = active;
}

}

и контейнерный tsx-файл, который отображает эти 12 элементов: в этой строке вызывается метод renderTags, который отображает элементы настр.Он извлекает элементы из массива с именем allTags и применяет к нему метод map:

<div  className={styles.tagCloud}>
              {this.state.allTags.slice(0, 12).map((t,index) => this.renderTags(t,index))}

        </div>

Это метод renderTags.Здесь есть вызов другого метода с именем collectTags, и я передаю элемент clicked и индекс:

private renderTags(tag: Tags, index:number) {

    return <div>
        <p onClick={(e) => { e.stopPropagation(); this.collectTags(tag,index); return false;}}>
            # {tag.title} <i className="ms-Icon ms-Icon--CirclePlus"></i>
        </p>
    </div>
}

, и это - collectTags.Здесь я пытаюсь получить доступ к свойству «active» выбранного элемента, используя индекс, который был отправлен из метода renderTags:

private collectTags(tags: Tags, index: any): any {
   console.log('TAG INDEX: ' + Tags[index]);
   Tags[index].active = true;

}

Здесь, когда я нажимаю на элемент, console.log говорит, что теги[index] не определенЯ ожидал получить индекс по нажатому элементу.Когда я запускаю console.log для Tags, я получаю возвращаемый объект (элемент clicked), и если я проверяю параметр index в консоли, я получаю индекс для элемента clicked.Но вместе, теги [index], я получаю неопределенное значение.

Как я могу обновить активный параметр выбранного элемента, я думал что-то вроде этого:

Tags[index].active = true;

С уважением к Американо