You need to escape HTML tags from the description value.

here is a helper function:

const escapeHTML = (htmlCode) => {
  htmlCode = htmlCode.toString();
  return htmlCode.replace(
    /<[^>]*(>|$)|&nbsp;|&#34;|&#39;|&zwnj;|&raquo;|&laquo;|&gt;/g,
    '',
  );
};

and than in your page:

<Text lineHeight=“2” color=“gray.600”>
{escapeHTML(description)}
</Text>

Hello,

The simplest way is to find a control/component that help to render html content, and assign the value to it.

Regards.

This is how the description is showing on the frontend. So how can I get rid of the html tags

<b>Royal Jubilant Real Estate is offering you a huge Chiller Free 4BHK Apartment located at Al Mankhool Close to Burjuman Metro Station Dubai, UAE. </b> Rent Details:- <b>> Offer Annual Rent 110,000/-AED > Chiller Free > In 4 to 6 Cheques installment > 5% Refundable Security Deposit > 5% Agency Fee > One Covered Parking Fee</b> <b>Apartment Details:-</b> > Spacious Hall with Balcony > 4 Bright Capacious bedrooms > 5 Bathrooms > Big size Kitchen with Central Gas > Fixed Cabinet > Central AC > Mid-Floor > Road view > Huge Haal with Balcony > Open view > Pool View <b>Building Features:-</b> > Laundry Provision > Vestibule inside Building > Service Elevators > Reception/Waiting Room > Reliability Staff & CCTV Security > Communication Satellite/Cable TV > Centrally Air-Conditioned > Heating System > Power Backup > Maintenance Staff > Gymnasium > Covered Free Parking <b>ABOUT AL MANKHOOL</b> Al Mankhool is in the Heart of Bur Dubai. <b>IN A NUTSHELL</b> * Alongside Khalid Bin Al Waleed Rd (D79) and Sheikh Rashid Rd (D75) * Home to Facilities like banks and Al Mankhool Public Library * Features up to 4-Bedrooms apartments for Rent * Located in closer proximity to Dubai Creek * Considerable options for top rental apartments in Bur Dubai. <b>HOTELS IN AL MANKHOOL</b> * Grand Excelsior Hotel * Citimax Hotel * Manhattan Avenue * Majestic City Retreat Hotel <b>AMENITIES, SCHOOLS, AND HEALTHCARE</b> Predominantly residential Al Mankhool offers all basic amenities at a hands length. Here, you will find a few of the top supermarket chains, educational institutes, and public Libraries in Dubai. <b>SUPER MARKETES IN AL MANKHOOL</b> A good number of supermarkets in Al Mankhool are available where residents can easily fulfill their day-to-day grocery needs. All Day Fresh is the closest option, available in a 12-minutes walk. There are also Maxims Supermarkete LLC, Bita Supermarket, Carrefour, LuLu supermarket, all available within 5 to 6 minutes of drive. <b>BEACHES NEAR AL MANKHOOL</b> Beach Lover can enjoy at Plenty of Places nearby. Jumeirah Public Beach is a 16-minutes away, while La Mar Beach is slightly closer, reachable in under 12-minutes. <b>LEISURE ACTIVITIES AND NOTABLE LANDMARKS</b> Some leisure places and notable landmarks near the area include:- * Dubai Museum * Zabeel Palace * Dubai Creek <b>LOCATION</b> * 9 minutes from Dubai Creek * 2 minutes from Sheikh Khalifa Bin Zayed Street (D88) * 11 minutes from Dubai International Airport * 9 minutes from Sheikh Rashid Road (E11) <b>Please contact us for more information and viewing confirmation. </b> <b>Muhammad Naeem, Property Consultant Phone: [redacted phone number] Email: [redacted email address]</b> <b>We will provide you with the best option based on your preferences. </b> <b>Other information about our company:-</b> <b>Website: </b><b>www. royaljubilant. ae</b> <b>Address: Office# 1804B, Bussines Central Towers, Al Sufouh - Dubai Internet City - Dubai</b> <b>Office Contact # [redacted phone number]</b> <b>ORN Number: 28839</b> <b>DED License: [redacted phone number]</b> <b>[redacted email address]</b> <b>[redacted email address]</b>

I am using next js and passed the real estate details as props with getServerSideProps.
This is a sample

import { Flex, Box, Text, Avatar, Spacer } from “@chakra-ui/react”;
import { FaBed, FaBath } from “react-icons/fa”;
import { BsGridFill } from “react-icons/bs”;
import { GoVerified } from “react-icons/go”;
import millify from “millify”;

import { baseUrl, fetchApi } from “…/…/utils/fetchApi”;
import ImageScrollbar from “…/…/components/ImageScrollbar”;

const PropertyDetails = ({
propertyDetails: {
type,
purpose,
furnishingStatus,
amenities,
photos,
title,
rentFrequency,
area,
externalID,
rooms,
price,
isVerified,
baths,
coverPhoto,
agency,
description,
},
}) => (
<Box maxWidth=“1000px” p=“4” margin=“auto”>
{photos && <ImageScrollbar data={photos} />}
<Box w=“full” p=“6”>
<Flex paddingTop=“2” alignItems=“center” justifyContent=“space-between”>
<Flex alignItems=“center”>
<Box paddingRight=“3” color=“green.400”>
{isVerified && <GoVerified />}
</Box>
<Text fontWeight=“bold” fontSize=“lg”>
USD {millify(price)} {rentFrequency && /${rentFrequency}}
</Text>
</Flex>
<Box>
<Avatar size=“sm” src={agency?.logo?.url} />
</Box>
</Flex>
<Flex
alignItems={“center”}
p="1"
justifyContent={“space-between”}
w=“250px"
color=“blue.400”
>
{rooms} <FaBed /> | {baths} <FaBath /> | {millify(area)} sqft{” "}
<BsGridFill />
</Flex>
<Box marginTop=“2”>
<Text fontSize={“lg”} fontWeight=“bold” marginBottom=“2” textTransform={“uppercase”}>
{title}
</Text>
<Text lineHeight=“2” color=“gray.600”>
{description}
</Text>
</Box>
<Flex
flexWrap="wrap"
justifyContent="space-between"
textTransform=“uppercase”
>
<Flex
justifyContent="space-between"
w="400px"
borderBottom="1px"
borderColor="gray.100"
p=“3”
>
<Text>Type</Text>
<Text fontWeight=“bold”>{type}</Text>
</Flex>
<Flex
justifyContent="space-between"
w="400px"
borderBottom="1px"
borderColor="gray.100"
p=“3”
>
<Text>Purpose</Text>
<Text fontWeight=“bold”>{purpose}</Text>
</Flex>
{furnishingStatus && (
<Flex
justifyContent="space-between"
w="400px"
borderBottom="1px"
borderColor=“gray.100"
p=“3”
>
<Text>Furnishing Status</Text>
<Text fontWeight=“bold”>{furnishingStatus}</Text>
</Flex>
)}
</Flex>
<Box>
{amenities.length && (
<Text fontSize=“2xl” fontWeight=“black” marginTop=“2”>
Amenities{” "}
</Text>
)}
<Flex flexWrap=“wrap”>
{amenities.map((item) =>
item.amenities.map((amenity) => (
<Text
color="blue.400"
p="2"
fontSize="l"
bg="gray.200"
m="1"
borderRadius="5"
key={amenity.text}
>
{amenity.text}
</Text>
))
)}
</Flex>
</Box>
</Box>
</Box>
);

export default PropertyDetails;

export async function getServerSideProps({ params: { id } }) {
const data = await fetchApi(${baseUrl}/properties/detail?externalID=${id});

return {
props: {
propertyDetails: data,
},
};
}

Hello,

It is hard to help you without a sample, but you may then try using an XML library to parse the string.

Regards.