How to read HTML Text from JSON file

Question

I am unable to read the HTML tags used in content of JSON file in my react app..

The JSON file :

[{
    "_id": 9,
"title":"Text 9",
    "subheader":"Dummy header 9",
    "images": "images/four-1.png",
    "imagesmob" : "images/four-1.webp",
    "content":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec velit consectetur, pretium risus vel, eleifend tortor. Integer enim nulla, iaculis sit amet leo vel, sagittis maximus leo. Aliquam semper sapien bibendum nulla consectetur, ut eleifend arcu accumsan. Duis consequat diam sed dolor convallis semper. Ut justo mauris, accumsan non tempus ut, ultrices at tellus. Quisque a sapien urna. Maecenas tempor consequat sollicitudin. Nullam volutpat a eros sit amet vestibulum. Cras sollicitudin vitae urna nec varius. Etiam nec facilisis urna.</p> <p>Donec ut dui condimentum, tincidunt tellus vitae, interdum lorem. Phasellus eget pretium enim. Morbi accumsan turpis vitae turpis venenatis ullamcorper. Proin pretium nisi nec nulla faucibus, a hendrerit turpis malesuada. Nullam id faucibus metus, id faucibus metus. Donec et massa suscipit, congue tortor non, ultricies turpis. Aliquam venenatis massa velit, id ornare ante efficitur vitae. Vivamus id dui tortor. Pellentesque sem mi, bibendum a orci hendrerit, mollis eleifend eros. Nunc sodales orci purus. Vivamus molestie porta egestas. <p>Suspendisse convallis mi ullamcorper, dapibus nisi a, semper felis. Praesent ut lacus eu neque vestibulum efficitur.<\/p> Sed dolor magna, mattis a ultricies vel, <b>tincidunt<\/b> eget enim.<\/p>"
}
]

The react file

<Card variant="outlined" sx={{ maxWidth:345, borderRadius: '11px' }} elevation={3}>
           <CardMedia
        component="img"
        height="194"
        image={welcom.images}
        alt="Home Page"
       
      />
        
      <CardHeader
       
        titleTypographyProps={{fontSize: 18, fontWeight: 'bold', color: 'purple' }}
        title = {welcom.title}
        
        subheader = {welcom.subheader}
        />
        
            <CardContent>
              <div>{welcom.content}</div>
            </CardContent>
         
        </Card>

In this when I am trying to read content from the json file , i am unable to get the text which is bold or paragraphs are also not coming. Any help.

Answer 1

You cannot render the raw html in React. For that you can use the dangerouslySetInnerHTML attribute, but you should be careful before using this attribute. As per reactjs document,

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

I have created based on your code.