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 pass properties from parent component to child component in React JS? Integrate Bootstrap with ReactJS Application How to pass data from child component to its parent in ReactJS? Getting Started with React and Hello World Example React JS get Tag Name and Inner Text on Click How to use createElement in React JS?