html-react-parser will not parse onChange function on select tag

Question

I am attempting to dynamically create multiple select drop downs in a loop. The html-react-parser works fine when there is just pure html in it. However, when I add a onChange function to the select tag, it does not parse that part correctly. It actually seems to just disregard it.

 let selectOptions = "<th>Details</th>";
 for(var j=0;j<envsToCommitsHolder.length;j++){
        selectOptions += "<th><select onChange={(event) => {handleOptionSelection(event.target.selectedOptions)}} id="+realRepoName[j+1]+"><option>"+realRepoName[j+1]+"</option>";       
        for(var h=0;h<envsToCommitsHolder[j].val.length;h++){
          console.log(realRepoName[j+1]);
          console.log(envsToCommitsHolder[j].val[h]);    
          //var value = envsToCommitsHolder[j].val[h];      
          selectOptions += "<option value="+h+">"+envsToCommitsHolder[j].val[h]+"</option>";          
        }
        selectOptions += "</select></th>";      
      }     
      return parse(selectOptions);     

Please see the attached image to see how it is being rendered. It puts the javascript outside of the select tag altogether. Is there some other way I should be doing this? I have attached the image of how the select with the onChange is being rendered on the browser -> problematic part . I also saw there is a "dangerouslySetInnerHTML" to parse string and render html out of it, but I am not sure how to use that or if it will be useful in this case or not. Any help would be greatly appreciated. I am quite stuck with this one.

Answer 1

I have created a sandbox to render the select options dynamically, you can custom the rendering on your own, https://codesandbox.io/s/react-typescript-forked-8psy13?file=/src/App.tsx
Basic React knowledge: useState, useEffect If y have a question, you can ask me here