How to show only texts in react from json data with html tag?

user_14559340 0
Viewed 463

I'm trying to present data and
the json data contains html tags. so it's shown like this in the
browser

<ul><li>Marcus</li><li>19year old</li></ul>

it literally contains html tags as text.

data['id'].map((v)=>(
   <div>{v.name}</div>
   <div>{v.age}</div>
))

in react how can I show only text?

reactjs json
2 Answers

Ideally you would show us an example of the json data, without seeing that this answer might not be that helpful.

You can use dangerouslySetInnerHTML to render a html string as if it were actually HTML:

const data = [
  { name: "<li>Marcus</li>", age: "<li>19 year old</li>" },
  { name: "<li>Jane</li>", age: "<li>22 year old</li>" }
];

export default function App() {
  return (
    <div className="App">
      {data.map((v) => (
        <>
          <div dangerouslySetInnerHTML={{ __html: v.name }} />
          <div dangerouslySetInnerHTML={{ __html: v.age }} />
        </>
      ))}
    </div>
  );
}

Codesandbox: https://codesandbox.io/s/wandering-dream-vhprd?file=/src/App.js

user_118140220

I solved it by using
yarn add react-html-parser
I got an advice from here
Render HTML string as real HTML in a React component
you can use this like below.

import ReactHtmlParser from 'react-html-parser';

const Component = (props) => {
   const {data} = props;
   return(
    <div>{ReactHtmlParser(data.title)}</div>
    {/* this will show bold text of hello instead of <b>hello</b> or any 
        other html form of json data */}
     )
   }
user_145593400
Related