Как передать значение из списка в React?

Question

[Александр Иванов]

Код очень простой думаю тут излишне много описывать

class App extends React.Component{
  state = {
    titel: 'List',
    arr: [
      'simon', 'dima', 'kosty'
    ]
  }
  ren(){
    alert( --- здесь должно быть значение текущего варианта списка --- )
  }
  render(){
    return(
      <div>
        <h1>{this.state.titel}</h1>
        <ol>
          {this.state.arr.map(
            (list, key) =>
              <li onClick={this.ren.bind(this)}>{list}</li>
          )}
        </ol>
      </div> 
    ); 
  }
}

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

https://codepen.io/Simon1111/pen/LQWBYY?editors=0010

____
ren(){
alert( this.state.arr [ сюда нужно как-то передать значение key ] )
}

Answer 1

[Alex Ander]

class App extends React.Component{
  state = {
    title: 'List',
    arr: [
      'simon','dima','kosty'
    ]
  }

  ren = ({target}) => {
    alert(target.textContent);
  }

  render(){
    return(
      <div>
        <h1>{this.state.title}</h1>
        <ol>
          {this.state.arr.map(
            (list, key) =>
              <li onClick={this.ren} key={key}>{list}</li>
          )}
        </ol>
      </div> 
    ); 
  }
}

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

Comments

[Александр Иванов]

Тоже только что справился, но вы быстрее оказались )

ren(key){ 
    alert(this);
    console.log(this.state.arr[key])
  }