Add Icon in dangerously set Inner html in React

Question

I am trying to add a icon in between string text using dangerously set inner html while div tag is working but arrow icon right (from material ui) is not working it. also noticed that it turns to lower case when actual html is rendered.

here is my code one of the strPath is "World->Americas->Latin America and the Caribbean"

let keyArray = Object.keys(selectedRegionsLocal);
    let listUI = [];
    for (let i = 0; i < keyArray.length; i++) {
        let strPath = selectedRegionsLocal[keyArray[i]].path;
        const pieces = strPath.split("->");
        let result = pieces.join(" <ArrowRightIcon></ArrowRightIcon> ")
        let fresult = '<div>' + result + '</div>';
        console.log('result ', fresult);
        listUI.push(
            <Grid dangerouslySetInnerHTML={{ __html: fresult }} />
        )
    }
    return listUI;

this is what i am getting in dev tools -> element section

image of actual value

what can i do to turn the above actual value to this

Answer 1

You can simply put an icon on each item:

Assume that your keyArray is something like this:

const keyArray = ["World", "Americas", "South", "America"];

Now, you can use map function to add an icon for each item:

const result = data.map((item, i) => (
  <div key={i}>
    <ArrowRightIcon />
    <span>{item}</span>
  </div>
));

Now, the result is ready to use, with a parent div and flex style, the final result will be produced:

<div style={{ display: "flex" }}>{result}</div>