Fluentui: DetailsList: Items data with html tag. How to render

[komal4364]

Hi,
I am using office-ui-fabric-React. We are detailsList component, which is used to display the items in list.
The data is received from the REST API Call, Some of the column data, has html tags associated with it.
We want to show user only the content in html tags, not html tags, and highlight the text in html.
How to handle that in DetailsList Component.
In angular, this can be solved using [innerHTML]="data" (Ref: https://stackoverflow.com/questions/34936027/angular-2-how-do-you-render-html-from-a-json-response-without-displaying-the-ta/34937279 )

The following is the example I referred. In that, the sortedItems has column data which has html tags in it.
https://github.com/OfficeDev/office-ui-fabric-react/blob/2ce6c5ac3ccf4e62d4866841317b4aa55b8fb541/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx

[Vitalius1]

@komal4364 I don't see any issue or actionable fix for Fabric DetailsList and it seems more like a React related question than a Fabric component related one. I would suggest posting this question on StackOverflow for a broader React audience. This might help you in getting started for a more in-depth search.
Another resource with some tips: https://shripadk.github.io/react/docs/jsx-gotchas.html#html-entities
Or maybe this package might give you what you need: https://www.npmjs.com/package/react-html-parser

Also, in case I misunderstood your question and you are indeed having an issue with DetailsList, we would appreciate if you could prepare a codepen example with what you are trying to achieve so that we could look into the issue. Here is a starter: https://codepen.io/vitalius1/pen/jXzLmb

If any of my provided suggestions satisfy your initial question feel free to close the issue. Thanks for using Fabric!

[KevinTCoughlin]

I'm in agreement with @Vitalius1.

@komal4364, you'll likely get more traction for this question on StackOverflow. We encourage you to post this question there either using the office-ui-fabric and / or the reactjs tag.

[komal4364]

I have spoken to Vitalius1 (I am a Microsoft employee). Recommendation is to customize the rendering of column using RenderItemColumn prop of DetailsList. Will try it. Thanks Vitalius1.

Eg:
https://github.com/OfficeDev/office-ui-fabric-react/blob/2ce6c5ac3ccf4e62d4866841317b4aa55b8fb541/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx