How to insert an accordion icon and do list toggling, if html data is coming from API instead of JSON response?

Question

HTML data is sent as response from API . I need to insert accordion icon to the items in the list and do the list toggling using HTML , CSS , JavaScript , React , MaterialUI . I don't have freedom to do it with JQuery . The below code is the response coming from API .

 <ul data-ga-category="Header_Left_CategoryMenu" class="accordion cdpmenu"> <li aria-label="Rakhi"> <a data-ga-title="Rakhi" tabindex="0" href="javascript:void(0);" class="toggle top-link">Rakhi</a> <ul class="inner" data-ga-category="Header_Left_CategoryMenu_Rakhi"> <li aria-label="For Recipient"> <a data-ga-title="For Recipient" href="javascript:void(0)" class="toggle inner-link">For Recipient</a> <ul class="inner"> <li><a href="/rakhi/for-brother?promo=rakhimenu_hm">Brother</a></li> <li><a href="/rakhi/for-bhaiya-bhabhi?promo=rakhimenu_hm">Bhaiya Bhabhi</a></li> <li><a href="/kids-rakhi?promo=rakhimenu_hm">Kids</a></li> <li><a href="/rakhi-gifts/for-sister?promo=rakhimenu_hm">Return Gifts for Sister</a></li> <li><a href="/digital-gifts/raksha-bandhan?promo=rakhimenu_hm">Digital Gifts</a></li> </ul> </li> <li aria-label="By Sets"> <a data-ga-title="By Sets" href="javascript:void(0)" class="toggle inner-link">By Sets</a> <ul class="inner"> <li><a href="/single-rakhi?promo=rakhimenu_hm">Single Rakhi</a></li> <li><a href="/set-of-2-rakhi?promo=rakhimenu_hm">Set Of 2 Rakhi</a></li> <li><a href="/set-of-3-rakhi?promo=rakhimenu_hm">Set Of 3 Rakhi</a></li> <li><a href="/set-of-4-rakhi?promo=rakhimenu_hm">Set Of 4 Rakhi</a></li> <li><a href="/set-of-5-rakhi?promo=rakhimenu_hm">Set Of 5 Rakhi</a></li> <li><a href="/family-rakhi-set?promo=rakhimenu_hm">Family Rakhi Set</a></li> <li><a href="/rakhi-sets?promo=rakhimenu_hm">Rakhi Sets</a></li> </ul> </li> </ul> </li> <li aria-label="Cakes"> <a data-ga-title="Cakes" tabindex="1" href="javascript:void(0);" class="toggle top-link">Cakes</a> <ul class="inner" data-ga-category="Header_Left_CategoryMenu_Cakes"> <li aria-label="By Types"> <a data-ga-title="By Types" href="javascript:void(0)" class="toggle inner-link">By Types</a> <ul class="inner"> <li><a data-sbnavmenu="Cakes~By Types~Bestseller Cakes~1" href="/cakes-bestsellers?promo=cakesmenu_hm">Bestseller Cakes</a></li> </ul> </li> </ul> </li> </ul>

Answer 1

Are you receiving that html snippet in a get request? Just fishing here since this information isn't provided. But if yes, you can modify anything in here (assuming you use axios, but any other request will do the same)

const modifyHtml = (html) => {
  return html.map((h) => here comes code to modify your html snippet)
};

axios.get('/endpoint_where_you_get_html')
  .then((response) => {
    // using react hooks
    setWhatever(modifyHtml(response.data));
  })
  .catch(() => {}) // some error handling here