React. Как правильнее привязать событие к элементам выводимым в цикле?

Question

[Pumba8897]

При выводе элементов в компонент через цикл, необходимо повесить на каждый из них событие наведения мыши. Но при данной реализации событие срабатывает на всех элементах сразу.

Функция выполняемая при наведении:

SomeFunction () {
    this.setState=({
        hover: !this.state.hover
    })
}

Пример цикла:

const arr = data.map((item, id) => {
    <div key={id} onMouseEnter={() => this.SomeFunction()}>
          <span className='someClass'>{item.name}</span>
          <SomeComponent hover={this.state.hover}  data={item.data}/>
    </div>
})

Как сделать , чтобы событие срабатывало только для элемента на котором оно срабатывает а не на всех выведенных через цикл.

Answer 1

[hzzzzl]

ну так мы пишем hover: true в компонент родителя, и потом true становится для всех

<SomeComponent hover={this.state.hover}  data={item.data}/>

вынести это в отдельный компонент, у каждого из которых будет свой стейт?

Comments

[Pumba8897]

Хорошо. А например если мне надо передать в функцию элемент на котором событие произошло?