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.
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.
I found that the location property created by the react application has an [object Object]. This seems a bit unusual.
I wrapped the component in withRouter (react-router). My component needs to use the history and matches, so I don't have the option to remove it in my React application component.
Please let me know if this is a bad thing and if there is a way to remove or hide it from html.
thank you.
The code as follow.
<div class="d-flex flex-column w-100 position-relative" location="[object Object]" match="[object Object]"><svg stroke="currentColor"
When i add <br/> inside the content property or pass to <p> tag, it's reflecting as text. I wish to break the line passing <br> into the content
Below are things i tried, both didn't work
<p>{item.description}</p>
<Text content={item.description} />
//Text is a component to output content within a p tag
json data as below
{
"description": "Add some break <br/> to this line"
}
dangerouslySetInnerHTML is what you need here to display your json data as html.
You could do something like this
<Text
dangerouslySetInnerHTML={{ __html: item.description }}
/>
How can I write this.props.element beside a HTML tag in JSX of react.js ?
? this.props.element (<span className="edit" onClick={()=> {this.props.makeInputBox(this.props.item)}}>Edit</span>):
I getting below error
TypeError: this.props.element is not a function
Whenever you want to show the constant data or props data in the jsx, you need to add that in curly braces. And in your case, you need to enclose the this.props.element and tag in some parent element like:
? <div>{this.props.element} <span className="edit" onClick={()=> {this.props.makeInputBox(this.props.item)}}>Edit</span></div>:
You can wrap the content within another span and write it like
? <span>{this.props.element} <span className="edit" onClick={()=> {this.props.makeInputBox(this.props.item)}}>Edit</span> </span>:
? {this.props.element} {this.props.makeInputBox(this.props.item)}}>Edit
I have a ReactJS render function that generates a html element with a style. However, the produced HTML doesn't contain this style. What am I doing wrong?
<a href="javascript:void(0);"
className={cx('img','box','med','no_img','photo','act')}
style={{
backgroundImage : `url:(${config.getUploadUrl()}/${photoDir}/main_${photo})`
}} />
HTML
remove the : after url its invalid value for backgroundImage