I am getting HTML tags in a single element for every cell of DataTables. I want to Parse HTML tags also but till now, unable to do so.
I have already tried html-react-parser but it is parsing them into an array.
import Parse from "html-react-parser";
<Table className={classes.table}>
<TableHead>
<TableRow>
{/* <TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell> */}
{props.tableData.HeadingData.map(el=>{
return <TableCell align="right">{el}</TableCell>
})}
</TableRow>
</TableHead>
<TableBody>
{rows.map(row => (
<TableRow>
{/* <TableCell align="right">{row}</TableCell> */}
{row.map(el=>{
console.log(Parse(el));
return <TableCell align="right">{Parse(el)}</TableCell>
})}
</TableRow>
))}
</TableBody>
</Table>
"content":{
"Title": "List Title",
"HeadingData" :["Name", "Company", "City", "State"],
"RowData" :[
["Joe James", "Test Corp<br/>TestCorp", "Yonkers", "NY"],
["John Walsh", "Test Corp", "Hartford", 1989],
["Bob Herm", "Test Corp", "Tampa", "FL"],
["James Houston", "Test Corp", "Dallas", "TX"],
]
},
Above is the Table Data and if you see company has the html tags "Test Corp
TestCorp".
I am not able to parse it as it is returning an array.
I found the solution. Solved by converting each cell element into string before parsing through html-react-parser.