Get element value from react ui material elements (ex: listitemtext)

Question

I have put an onClick() event in which I call a function to get the value of any element clicked inside the HTML body and display it inside a web component.

<div id="root" onclick="traiteClick(event)"></div>

This is how I get the clicked object inside the traiteClick() function.

let object = document.getElementById(evt.target.id).innerHTML;

This works with HTML elements since I can give them ids but not with my ui material elements.

<ListItemText className='test' primary="Date de naissance" secondary={artist?.lifeSpan?.begin} />

I tied using getElementsByClassName but it didn't work. Do you have any suggestions?

Answer 1

The read-only target property of the Event interface is a reference to the object onto which the event was dispatched.

You don't need to get an id and use it to find an object. Just use event.target or event.currentTarget.

Read more here