How to access the user-defined attribute value using e.target - javascript/react.js

Question

I am trying to access the value keyboard_arrow_down , but not sure how to.When I give e.target.innerText , I get keyboard_arrow_downSample Forms , but I just need the keyboard_arrow_down

The following is the collapsible dropdown element from 'react-materialize'

<CollapsibleItem id={index}  header={item.title} icon='keyboard_arrow_down' onClick={this.changeIcon}>
</CollapsibleItem>

The following the code executed on onClick event

changeIcon(e) {

        var currElmTxt = e.target.innerText
        console.log('e.target',e.target);
        console.log('e.target.innerText', e.target.innerText);
        //var iconTxt = e.target.innerText === "keyboard_arrow_down" ? "keyboard_arrow_up" :("keyboard_arrow_up"? "keyboard_arrow_down");
        if(e.target.innerText === "keyboard_arrow_down"){
            e.target.innerText = 'keyboard_arrow_up';    
        } else if(e.target.innerText === "keyboard_arrow_up"){
            e.target.innerText = 'keyboard_arrow_down'; 
        } else {}

        //console.log('e.target', e.target);

    }

The following is the console print of e.target .

<div class="collapsible-header active">
        <i class="material-icons">keyboard_arrow_down</i>
        Sample Forms
    </div>

Answer 1

您只需要选择i元素

e.target.querySelector('i.material-icons').innerText