refactor: Replace dangerouslySetInnerHTML with html-react-parser for safer content rendering across various components and pages.

Jexsie · Jexsie · commit 4f88f5fdca44 · 2026-03-13T16:09:24.000+03:00
Signed-off-by: Jessie Ssebuliba &lt;jessiessebuliba@gmail.com&gt;
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "date-fns": "^4.1.0",
     "gray-matter": "^4.0.3",
+    "html-react-parser": "^5.2.17",
     "next": "16.1.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
@@ -4,6 +4,7 @@ import { format } from "date-fns";
 import Link from "next/link";
 import ShareButtons from "@/components/ShareButtons";
 import { notFound } from "next/navigation";
+import parse from "html-react-parser";
 
 export async function generateStaticParams() {
   const posts = getAllPosts();
@@ -60,10 +61,9 @@ export default async function BlogPostPage({
         {/* Content */}
         <div className="container py-14 sm:py-[80px] lg:py-[90px]">
           <main className="w-full min-w-0 max-w-[800px] mx-auto">
-            <div
-              className="content text-sm text-charcoal font-normal sm:text-base"
-              dangerouslySetInnerHTML={{ __html: post.contentHtml }}
-            />
+            <div className="content text-sm text-charcoal font-normal sm:text-base">
+              {parse(post.contentHtml)}
+            </div>
             <div className="mt-11 mx-auto w-fit">
               <ShareButtons />
             </div>
diff --git a/src/app/hacktoberfest/page.tsx b/src/app/hacktoberfest/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { getSimplePage } from "@/lib/posts";
 import IssueList from "@/components/IssueList";
+import parse from "html-react-parser";
 
 export const metadata: Metadata = {
   title: "Hacktoberfest 2024",
@@ -30,10 +31,9 @@ export default async function HacktoberfestPage() {
       </div>
       <div className="container py-14 sm:py-[80px] lg:py-[90px]">
         <main className="w-full min-w-0 max-w-[800px] mx-auto">
-          <div
-            className="content text-sm text-charcoal font-normal sm:text-base"
-            dangerouslySetInnerHTML={{ __html: contentHtml }}
-          />
+          <div className="content text-sm text-charcoal font-normal sm:text-base">
+            {parse(contentHtml)}
+          </div>
           <IssueList endpoint="https://hedera-issues.koyeb.app/api/hacktoberfest-issues" />
         </main>
       </div>
diff --git a/src/app/heroes/page.tsx b/src/app/heroes/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { getSimplePage } from "@/lib/posts";
 import ContributorsGrid from "@/components/ContributorsGrid";
+import parse from "html-react-parser";
 
 export const metadata: Metadata = {
   title: "Hiero Heroes",
@@ -31,10 +32,9 @@ export default async function HeroesPage() {
       </div>
       <div className="container py-14 sm:py-[80px] lg:py-[90px]">
         <main className="w-full min-w-0 max-w-[800px] mx-auto">
-          <div
-            className="content text-sm text-charcoal font-normal sm:text-base"
-            dangerouslySetInnerHTML={{ __html: contentHtml }}
-          />
+          <div className="content text-sm text-charcoal font-normal sm:text-base">
+            {parse(contentHtml)}
+          </div>
           <ContributorsGrid endpoint="https://hedera-issues.koyeb.app/api/v2/contributors" />
         </main>
       </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -40,8 +40,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${spaceGrotesk.className} ${spaceGrotesk.variable} ${ibmPlexMono.variable}`}
-      >
+        className={`${spaceGrotesk.className} ${spaceGrotesk.variable} ${ibmPlexMono.variable}`}>
         <header className="relative h-22.5">
           <Header />
         </header>
diff --git a/src/components/MeetSection.tsx b/src/components/MeetSection.tsx
@@ -1,3 +1,5 @@
+import parse from "html-react-parser";
+
 type MeetCall = {
   name: string;
   description: string;
@@ -24,10 +26,9 @@ export default function MeetSection({ data }: MeetSectionProps) {
             <h2 className="text-2xl mb-2.5 sm:text-4xl sm:mb-5">
               {data.heading}
             </h2>
-            <div
-              className="text-lg max-w-full md:max-w-[800px] space-y-4"
-              dangerouslySetInnerHTML={{ __html: data.text }}
-            />
+            <div className="text-lg max-w-full md:max-w-[800px] space-y-4">
+              {parse(data.text)}
+            </div>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
             {data.calls.map((call, i) => (
diff --git a/src/components/OpenSourceSection.tsx b/src/components/OpenSourceSection.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import parse from "html-react-parser";
 
 type OpenSourceData = {
   whyHeading: string;
@@ -46,10 +47,7 @@ export default function OpenSourceSection({ data }: OpenSourceSectionProps) {
             />
           </div>
           <h2 className="text-2xl font-medium mb-5">{data.whatHeading}</h2>
-          <p
-            className="text-base max-w-[565px]"
-            dangerouslySetInnerHTML={{ __html: data.whatText }}
-          />
+          <div className="text-base max-w-[565px]">{parse(data.whatText)}</div>
         </div>
       </div>
     </div>
diff --git a/src/components/QuotesCarousel.tsx b/src/components/QuotesCarousel.tsx
@@ -6,6 +6,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { Autoplay } from "swiper/modules";
 import type { SwiperRef } from "swiper/react";
 import "swiper/css";
+import parse from "html-react-parser";
 
 type QuoteItem = {
   quote: string;
@@ -54,14 +55,12 @@ export default function QuotesCarousel({ data }: QuotesCarouselProps) {
                         loading="lazy"
                       />
                     </div>
-                    <div
-                      className="mb-5 [&>a]:text-white"
-                      dangerouslySetInnerHTML={{ __html: quote.quote }}
-                    />
-                    <div
-                      className="font-bold mb-[155px] [&>a]:text-white"
-                      dangerouslySetInnerHTML={{ __html: quote.author }}
-                    />
+                    <div className="mb-5 [&>a]:text-white">
+                      {parse(quote.quote)}
+                    </div>
+                    <div className="font-bold mb-[155px] [&>a]:text-white">
+                      {parse(quote.author)}
+                    </div>
                   </SwiperSlide>
                 ))}
               </Swiper>
diff --git a/src/components/TSCSection.tsx b/src/components/TSCSection.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import Image from "next/image";
 import tscMembers from "@/data/technical_steering_committee.json";
+import parse from "html-react-parser";
 
 type Member = {
   firstName: string;
@@ -34,10 +35,9 @@ export default function TSCSection() {
               <h2 className="text-3xl mb-2.5 sm:text-4xl sm:mb-4">
                 {tscHeading}
               </h2>
-              <div
-                className="space-y-4 text-base sm:text-lg"
-                dangerouslySetInnerHTML={{ __html: tscText }}
-              />
+              <div className="space-y-4 text-base sm:text-lg">
+                {parse(tscText)}
+              </div>
             </div>
           </div>
           <div className="team-members grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-[40px] sm:gap-y-[60px]">
@@ -103,10 +103,9 @@ export default function TSCSection() {
                           loading="lazy"
                         />
                       </div>
-                      <div
-                        className="text-white mt-2 [&>p]:mb-4 [&>p:last-child]:mb-0"
-                        dangerouslySetInnerHTML={{ __html: member.bio }}
-                      />
+                      <div className="text-white mt-2 [&>p]:mb-4 [&>p:last-child]:mb-0">
+                        {parse(member.bio)}
+                      </div>
                       <button
                         className="text-black text-lg rounded-full py-1.5 px-[26px] bg-white-dark self-center mt-4 cursor-pointer"
                         onClick={() => setOpenBio(null)}>
diff --git a/src/components/WhatIsHieroSection.tsx b/src/components/WhatIsHieroSection.tsx
