Как определить индекс элемента, по которому кликнули?

Question

[Ольга]

this.state = {
	selectCard: {id: null, select: false}
};

На странице рендериться блок с карточками, внутри каждой карточки есть кнопка. Нужно определить на какой из карточек был совершен клик и передать в selectCard порядковый номер этой карточки и поменять значение select на true.
Сейчас все выглядит так:
функция, которая должна определять индекс карточки на которую кликнули

handleOnClick(){
		let cards = document.querySelectorAll('#fabricCard'); //собираем массив все карточек
		cards.forEach((card, i) => card.addEventListener('click', () => {
			this.saveData(i);
		}));
	}

функция, которая меняет selectCard:

saveData(i){
		this.setState({
			selectCard: {
				id: i,
				select: !this.state.selectCard.select
			}
		});
	}

рендер:

render{
return(
<div className={styles.expand_container}>
	{_mock_.free_fabric.map(card =>
	<FreeFabricCard key={card.id}{...card} amountCard={amountCard} handleClick={this.handleOnClick} choose={selectCard.select}/>
					)}
</div>
)
}

Comments

[Роман Александрович]

render{
return(
<div className={styles.expand_container}>
	{_mock_.free_fabric.map((card,index) =>
	<FreeFabricCard key={card.id}{...card} amountCard={amountCard} handleClick={this.handleOnClick.bind(index)} choose={selectCard.select}/>
					)}
</div>
)
}

handleOnClick(ind){
		console.log("your index",ind)
	}

[Ольга]

Роман Александрович, отлично! спасибо!

Answer 1

[Роман Александрович]

render{
return(
<div className={styles.expand_container}>
	{_mock_.free_fabric.map((card,index) =>
	<FreeFabricCard key={card.id}{...card} amountCard={amountCard} handleClick={this.handleOnClick.bind(index)} choose={selectCard.select}/>
					)}
</div>
)
}

handleOnClick(ind){
		console.log("your index",ind)
	}

Comments

[Ольга]

а как теперь для карточки, для которой получен индекс передать значение choose={true}?

[Роман Александрович]

Ольга, this.handleOnClick.bind(index, сюда переменную)
handleOnClick(ind, здесь вы ее принимаете ){
console.log("your index",ind)
}