Insert HTML with React Variable Statements (JSX)

Safe HTML parsing

When you need to parse and render HTML, consider using the html-react-parser library. Ensure that the content is sanitized before parsing.

import parse from 'html-react-parser';
const parsedHTML = parse(safeHTML);

const ParsedComment = () => (<div>//Parsed HTML here, nothing to see 👀{parsedHTML}</div>);


When it comes to dynamic content in JSX, wrap it in {} without quotes, also known as JSX variable interpolation.

const headerText = 'Welcome';
const WelcomeUser = () => <h1>{headerText} // Wave "Hello 👋" to Redux!</h1>;


For grouping multiple elements without adding additional nodes to the DOM, use <Fragment> or <>.

Reusability with components

Creating reusable HTML elements? You may want to consider breaking them into separate components or functions returning JSX.

const Greeting = ({ name }) => <p>Hello, {name}! // Can you see the "personal touch" 😉?</p>;


If dynamic content needs frequent updates, manage state and data flow to keep the UI responsive and secure.

Mitigate XSS when parsing HTML

It's incredibly important to ensure safe practices when injecting HTML. Treat dangerouslySetInnerHTML with caution, and implement XSS mitigation strategies. Always use DOMPurify.sanitize() to clean the raw HTML.

const SaferComment = () => (
  <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawHTML) }} />
   // It's like an hazmat suit for your HTML 💀!
);


For more complex structures, React.createElement allows a declarative creation of components.

Handling complex structures

When dealing with nested or conditional JSX, breaking the complexity into smaller, composable components vastly improves readability and maintainability.

const ToDoItem = ({ task }) => <li>{task} // Check this off your list ✔️!</li>;


Take advantage of modern JavaScript by using the spread operator to pass down props to your components. It's as easy as spreading butter 🧈!