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
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>