JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="maListe">
    <li class="element" data-texte="foo">Item 1</li>
    <li class="element" data-texte="bar">Item 2</li>
    <li class="element" data-texte="baz">Item 3</li>
    <li class="element" data-texte="toto">Item 4</li>
    <li class="element" data-texte="titi">Item 5</li>
    <li class="element" data-texte="tata">Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li class="element" data-texte="42">Item 10</li>
</ul>

CSS

.element{
    cursor: pointer;
}

JavaScript

document.getElementById('maListe').addEventListener('click', function(e){
    var initElem = e.target;
    if(initElem.className != 'element'){ // Si l'élément n'est pas un de ceux à traiter
        return;
    }
    alert(initElem.dataset.texte);
});