Golang React JS Technology Blog

How to get a clicked HTML element in React?

Example

import React, { Component } from 'react';
 
class App extends Component {
 constructor(props) {
    super(props)
    this.list_element = React.createRef()
    this.state = {
      items: [
        { text: 'Test1'},
        { text: 'Test2'},
        { text: 'Test3'},
        { text: 'Test4'}
      ]
    }
  }
 
  doSomething(text, index) {
    alert(text);
    alert(index);
  }
 
  render() {
    return (
      <ol>
        {this.state.items.map((item, index) => (
          <li key={item.text} onClick={() => this.doSomething(item.text, index)}>
            <span>{item.text}</span>
          </li>
        ))}
      </ol>
    );
  }
}
 
export default App;
Most Helpful This Week
How to use function inside JSX expression? Loop inside React JSX What is JSX? Glyphicon Rating Star component State and Props in React How to perform computation inside expression using ternary operator? React JS update Div content on click 3 Different Examples - How State Works in React? How to build and use a custom react component from scratch? Display JSON Data in React JS