I have a problem executing dangerouslySetInnerHTML in nextJS. I want to remove the <p> tag, but when it is reloaded it doesn't even appear on the screen.
this is my code
You can only set one of children or props.dangerouslySetInnerHTML.
The return() function should be:
return (
<div className={styles.article} dangerouslySetInnerHTML={{ __html: data }} />
);
I do recommend using DOMPurify to sanitize your HTML before inserting it in the DOM via dangerouslySetInnerHTML.
Related
Is it ok to set dangerouslySetInnerHTML as empty?
I am using dangerouslySetInnerHTML to render SVG HTML only if a condition is met. My code:
<div dangerouslySetInnerHTML={ custom && isSVG(custom) && { __html: DOMPurify.sanitize(custom) } }>
</div>
If custom is true and isSVG(custom) is true I am rendering the HTML. Otherwise, dangerouslySetInnerHTML will be set to empty.
The code seems to work but I am curious if this is a correct way to do it. Can setting dangerouslySetInnerHTML to empty cause any issues?
In my react app, I receive a text from the API like "Fully furnished luxury apartment for sale in San Fransisco.↵↵The following features are available↵↵-Water↵ -T...".
I need to render this text as a multiline text with blank lines instead of these return characters. I used the following method to render the text.
<div className="previewSectionDesc">
{<div dangerouslySetInnerHTML={{ __html: propertyDescription }} />}
</div>
But this is what I received with no blank lines.
Fully furnished luxury apartment for sale in San Fransisco. The following features are available -Water -T...
How can I solve this?
HTML will ignore the line breaks in your text when displaying it. If you want to use dangerouslySetInnerHTML, you'll have to convert them to <br/> elements first:
<div className="previewSectionDesc">
<div dangerouslySetInnerHTML={{ __html: propertyDescription.replace(/\n/g,'<br/>') }} />
</div>
You could also dispense with dangerouslySetInnerHTML by splitting your text on linebreaks, then showing each line as a <div>:
<div className="previewSectionDesc">
{propertyDescription.split('\n').map((line, idx) => <div key={idx}>line</div>)}
</div>
Still another way would using the <pre> element rather than a <div>, where HTML will preserve your linebreaks.
You can use the css white-space property to preserve the whitespace received. white-space: pre;
In order to force react-router to treat links we should insert link as component: <Link to="/path"> rather then <a href="/path">.
What should I do in situation when html content arrives from server and inserted via (oh no...)
dangerouslySetInnerHTML?
render() {
return (
<div
dangerouslySetInnerHTML={{__html: store.posts[0].post_content}}
/>
);
}
What is the best way to force react-router to treat (internal) links in this html? Should I parse the html and convert it to components?
Instead of normal links
you could use a link that run a function like this:
<a OnClick={()=> history.push('route')}>go to</a>
sorry I haven't tested it :D
I'm trying to set microdata to a p element contained in a parent component. When I set itemScope="" in the parent I don't get it in the p element in the dom, but if I set itemScope alone, it works as expected, although this means itemScope={true} as per React rules. ItemScope is a boolean attribute so as per HTML specs it should be empty string or canonical value when you want it to be considered true. What am I missing?
See fiddle:
https://jsfiddle.net/rv9085ob/
<!-- html -->
<div id="app"></div>
// js
const SimpleComp = (props) => <p {...props}>ItemScope is [{JSON.stringify(props.itemScope)}]</p>;
const fragment = <div>
<SimpleComp itemScope="" />
<SimpleComp itemScope />
<SimpleComp itemScope={true} />
</div>;
ReactDOM.render(fragment, document.querySelector("#app"))
Results in:
<div>
<p>ItemScope is [""]</p>
<p itemscope="">ItemScope is [true]</p>
<p itemscope="">ItemScope is [true]</p>
</div>
Please refer to this issue in the React Github repository. https://github.com/facebook/react/issues/13400
There is a PR open for this here, it seems to be ongoing - https://github.com/facebook/react/pull/13404
React is doing strange things with the <p> tag. Using the same markup structure, with a <p> tag vs a <div> tag produces very different results. For example,
var withP = (
<p>
withP
<div />
</p>
);
var withDiv = (
<div>
withDiv
<div />
</div>
);
Here is what the generated markup looks like in chrome:
Here is a live jsbin demo.
Why does React render <p> differently than <div>?
<p> can not have nested block elements. Chrome (not React) is transforming the markup to make it valid.