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
Example of React JS with Material UI components Create Functional Component using ES6 Arrow Syntax onClick Event binding and get event name in ReactJs How to render one component in another component in React JS? How to use createElement in React JS? onMouseDown and onMouseUp Event handling in ReactJs