UserComments.js

import React, { useState } from 'react';
import DOMPurify from 'dompurify';

const UserComments = () => {
  const [comments, setComments] = useState([
    // Assume these comments are fetched from a server
    { id: 1, content: '<script>alert("XSS Attack!")</script>Great article!' },
    { id: 2, content: 'Really enjoyed this post.' },
    // More comments...
  ]);

  const createMarkup = (htmlContent) => {
    return { __html: DOMPurify.sanitize(htmlContent) };
  };

  return (
    <div>
      <h2>User Comments</h2>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id} dangerouslySetInnerHTML={createMarkup(comment.content)} />
        ))}
      </ul>
    </div>
  );
};

export default UserComments;