Snippet

Preventing XSS by Safely Rendering Dynamic String Content

By default, React treats interpolated string data inside JSX as plain text and automatically escapes special characters like < and >. This built-in security mechanism prevents malicious scripts from executing in the browser without requiring manual HTML sanitization.

snippet.js

javascript

import React, { useState } from 'react';
 
function UserComment({ rawInput }) {
  const [commentText] = useState(rawInput);
 
  return (
    <div className="comment-box">
      <p>User feedback: {commentText}</p>
    </div>
  );
}

react

Breakdown

const [commentText] = useState(rawInput);

Stores user-provided comment text as a standard primitive string value in state.

<p>User feedback: {commentText}</p>

Safely embeds string content where React automatically escapes potential HTML tags, preventing script injection.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Preventing XSS by Safely Rendering Dynamic String Content

Related