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
React JS Blog CRUD operation How to perform computation inside expression using ternary operator? Using this keyword access component properties and methods React JSX 3 Different Examples - How State Works in React? How to create simple React Router to navigate multiple pages? How to handle events using expressions inside JSX? What is JSX? Loop inside React JSX Example of React Bootstrap Datatable