Как установитьState на событие клика, только один раз в цикле?

Question

У меня есть функция, где я перебираю список меток. У меня есть событие onClick, где я вызываю функцию. Эта функция устанавливает для clicked состояние идентификатора выбранного элемента в цикле. Функция также console.log находится в состоянии.

Он регистрирует состояние clicked 8 раз. В моем цикле 4 элемента.

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

Вот мой цикл:

 {
  filteredArray.map(link => {
   return (
    <div
     key={link.id}
     role="button"
     style={{paddingBottom: 20}}
     onClick={this.changeView(link.id)}
     onKeyPress={this.changeView(link.id)}
     tabIndex={0}
    >
    <Paragraph size="large">
    <a className='heading__dropdown__link' 
     {link.label}
    </a>
    </Paragraph>
   </div>
  )
 })
}

Вот моя функция changeView:

  changeView(id) {
    const { clicked } = this.state
    console.log(clicked)

    return (
      () => this.setState({clicked: id})
    )
  }

Answer 1

удалить onPress и добавить функцию стрелки в onClick вот так

onClick={()=>this.changeView(link.id)}

надеюсь, это поможет

Answer 2

Вы вызываете функцию для каждого элемента, установите свою функцию так:

changeView = id => ev => this.setState({clicked: id});