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?
Related
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.
content={
<span>
<img className="rounded-circle img_center"
src={icon} alt="" />
</span>
}
if the content is the prop and that has above image content.
<span dangerouslySetInnerHTML={{ __html: content }} />;
This is rendered as [object object], how this can be handled. Also is there a way to use fragments instead of span tag to render dangerouslySetInnerHTML
in that case you dont need to use dangerouslySetInnerHTML but use this library
jsxt-to-string
You're not passing HTML you're passing an object (in this case apparently JSX). When an object is rendered directly as HTML it comes out as [object object]. It'll be the className that's causing it to be read as an object rather than just incorrect HTML.
Use a div rather than span.
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
I am trying to use a property off the router to trigger an ngIf but am not sure of the correct syntax in the html. Angular2 RC6
{
path: 'detail/:id',
component: HeroDetailComponent
},
<div *ngIf="router.component = HeroDetailComponent">
some text to be shown if the HeroDetailComponent is loaded
</div>
use === not reflected on angular docs page....
What is the correct syntax to handle nested conditional logic in a React component?
React.createClass
render: ->
<div>
{if #props.showList
{for item in #props.myItems
{item}
}
else
}
</div>
The for loop (on its own) can be rendred; the if/else conditional (on its own) can be rendered. However, nesting the for loop inside the conditional fails.
Any help would be very much appreciated.
I haven't tested it, but based on how normal JSX works you only need the {expression} thing to escape from JSX mode.
The program starts in JS mode (or CS here), and when an element tag is encountered it enters JSX mode. Using {foo} in JSX mode causes it to go back to JS mode. From there the above rules apply, and you can re-enter JSX mode by starting a tag, and so on.
render: ->
<div>
{
if #props.showList
for item in #props.myItems
item
else
<div>{foo}</div>
}
</div>
With annotations:
CoffeeScript:
render: ->
JSX within CoffeeScript
<div>
CoffeeScript within JSX within CoffeeScript
{
if #props.showList
for item in #props.myItems
item
else
JSX within CoffeeScript within JSX within CoffeeScript
<div>
CoffeeScript within JSX within CoffeeScript
{foo}
JSX within CoffeeScript
</div>
JSX within CoffeeScript
}
</div>
CoffeeScript
...
Inside the {} sections you can just use normal Coffeescript/CJSX code, as long as it evaluates to a single expression:
React.createClass
render: ->
<div>
{
if #props.showList
for item in #props.myItems
<span key={item.id}>{item}</span>
else
<span>some other content</span>
}
</div>