How to read HTML Text from JSON file-CodePudding

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.

CodePudding user response：

You cannot render the raw html in React. For that you can use the