javascript - How to determine valid selector for dynamic class (react)?

Question

I have below div (which is a dropdown) in frontend, i am trying to get the selected value from "li" for exg "Price Highest" is selected then i am trying to get its value using javascript.

<div class="makeStyles-sortOptionDesktopContainer-155">
<a class="makeStyles-selection-156">Price Highest</a>
<ul>
<li><a>Our Favs</a></li>
<li><a>Newest</a></li>
<li><a>Price Highest</a></li>
<li><a>Price Lowest</a></li>
</ul>
</div>

 <div className={classes.sortOptionDesktopContainer}>
    <a className={classes.selection}>{sortingOption[selectedIndex].text}</a>
    <ul>
        {
            sortingOption.map((item,index) => (<li key={`sort-opt-${index}`} onClick={()=>{setIndex(index);onUpdateSort(item.id)}}><a>{item.text}</a></li>))
        }
    </ul>   
</div>

<SortOptions selectedOption={pageData.sort} onUpdateSort={applySortOption}/>
  
const applySortOption = (sortOption) => {
        updateStore(store => ({
        reloading: true,
        pageData: {
            ...store.pageData,
            page:1,
            sortBy:sortOption
        },
        }))
        console.log(store.pageData)
        console.log(sortOption)
    }
        

The issue is it uses dynamic class name, i am not sure how to use this class name as selectors in javascript any thoughts on this ?

question from:https://stackoverflow.com/questions/65931638/how-to-determine-valid-selector-for-dynamic-class-react

Answer 1

Waitting for answers