Include the className attribute on the contents received from dangerouslySetInnerHTML

Question

Include the className attribute on the contents received from dangerouslySetInnerHTML

What is the best way to define the className attribute for a div that contains 'hello world'?

<div dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} />

One option is to set it on the outer div like this:

<div dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} className='class-name'/>

and then style the child in CSS:

.class-name div {
  (add your CSS styles here)
}

However, my goal is to directly set the className on the div containing 'hello world'

EDIT: Adding a class name to the injected HTML does not resolve the issue. For example:

let content = '<div class="class-name">hello world</div>'
<div dangerouslySetInnerHTML={{__html: content}}

This approach does not work well when the same content is used multiple times and can lead to CSS collisions (especially when using style-loader with CSS modules)

css reactjs styling

Answer 1

Answer №1

It has been two years since I stumbled upon this question, seeking to achieve the same results. While the answers provided were not quite accurate, a solution was found thanks to @jash8506 and their insightful response to this particular query.

The key to solving this lies in utilizing two essential react hooks.

As per the documentation, useRef is used for accessing DOM elements in React, while useLayoutEffect serves to read layout from the DOM and trigger a synchronous re-render.

By targeting the firstChildElement within the container div and applying classes to its classList, the desired outcome can be achieved.

Below is an example of the completed code:

const containerRef = useRef();

useLayoutEffect(()=>{
  if (containerRef.current){
    containerRef.current.firstElementChild.classList.add('class-name');
  }
});

return (
  <div ref={elRef} dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} />
)

Answer 2

It has been two years since I stumbled upon this question, seeking to achieve the same results. While the answers provided were not quite accurate, a solution was found thanks to @jash8506 and their insightful response to this particular query.

The key to solving this lies in utilizing two essential react hooks.

As per the documentation, useRef is used for accessing DOM elements in React, while useLayoutEffect serves to read layout from the DOM and trigger a synchronous re-render.

By targeting the firstChildElement within the container div and applying classes to its classList, the desired outcome can be achieved.

Below is an example of the completed code:

const containerRef = useRef();

useLayoutEffect(()=>{
  if (containerRef.current){
    containerRef.current.firstElementChild.classList.add('class-name');
  }
});

return (
  <div ref={elRef} dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} />
)

Answer 3

Answer №2

<div className="post-content" dangerouslySetInnerHTML={{ __html: post.content}}/>

Answer 4

<div className="post-content" dangerouslySetInnerHTML={{ __html: post.content}}/>

Include the className attribute on the contents received from dangerouslySetInnerHTML

Answer №1

Answer №2

Similar questions

Is there a way to print the full page including scroll tab content?

axios POST request in react app receives an empty response, while the Rails server displays a 201 status code

What is the best way to center a div vertically within a bootstrap 5 carousel across all screen sizes?

Three divs are positioned within the parent element and collectively fill the entire height. The first and last div have varying

React Material UI Expansion Panel with disabled cursor pointer

One way to declare i18next specifically in React's App.tsx file is by following these

Words with emphasized border and drop shadow effect

NextJS Deployment on Windows Server with IIS 10

What is the correct way to assign a value to the switch?

Background: Cover causing image to be cut off

I do not have ESLint set up, so I can use JSX without needing 'React' to be in scope

Having trouble decoding a cookie received from a React.js front-end on an Express server

Next.js - the next development environment fails to show the latest code modifications

Bootstrap allows for the use of video backgrounds, offering the option for borders to be included

When the height of the window decreases, scrolling is not implemented

Error: The function explore() is missing a required parameter called 'path'

Transforming a form into a React component

What is the best way to ensure that my website's elements adjust automatically to different screen sizes?

It appears that the margin is malfunctioning

React Native app unable to play S3 video on iOS device