How do I bind a handler to each item in the list?

Question

Example:

<ul>
  <li name="one">1</li>
  <li name="two">2</li>
  <li name="three">3</li>
  <li name="four">4</li>
  <li name="five">5</li>
  <li name="six">6</li>
</ul>

Each element is necessary to prescribe -

 onMouseOver={() => this.hover(event.target.getAttribute('name'))}
 onMouseOut={() => this.hover(false)}

There are a lot of elements, is it possible to specify these handlers without prescribing them to each element?

Consider [*event delegation*](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation). — RobG, Aug 29 '17 at 00:19

score 0 · Accepted Answer · answered Aug 29 '17 at 00:28

My suggestion is to use map, define your array of object first.

const allData = [
  {key: 1, name:'one'},
  {key: 2, name:'two'},
  {key: 3, name:'three'},
  {key: 4, name:'four'}
]

allData.map((data) => {
  <li 
    name=data.name
    onMouseOver={() => this.hover(event.target.getAttribute('name'))}
    onMouseOut={() => this.hover(false)}
  >
    data.key
  </li>
})

How do I bind a handler to each item in the list?

1 Answers1