I am using django as backend and react as frontend, I am using tinymce to create description in django-admin page , But react is displaying description content with html tags
Ouput:
<p>Best Cough Syrup</p>
I used dangerouslySetInnerHTML but page is not loading any content
<div dangerouslySetInnerHTML={product.description} />
Is there any way to solve this issue
Try this:
{
<div
dangerouslySetInnerHTML={{__html:product.description}}
>
</div>
}
Related
I am using a headless CMS(Strapi) and React on the frontend. I would like to render code blocks with highlighting using PrismJS (or anything).
In my render():
<div>
<pre>
<code className="language-css">{`p { color: red }`}</code>
</pre>
<h2>{this.state.title}</h2>
<div dangerouslySetInnerHTML={{ __html: `${content}` }} />
</div>
The code wrapped with <pre> tags serves as an example of what I'm trying to do.
The problem is that since I'm using the Strapi CMS, the code block not recognized by PrismJS. Here's how it's rendered:
The top part is the code directly written in my component while the bottom is returned from the CMS. In the WYSIWYG of the CMS I have the following <pre><code class="language-css">p { color: red }</code></pre>
Is there a way that I can write content with text and code and have the code highlighted properly?
This seems like a similar issue: React : Rendering a syntax highlighted code block
This solved my problem: https://github.com/akiran/react-highlight
Be sure to set your CSS in index.html and I added the following in my project:
<Highlight language="javascript" innerHTML={true}>
{content}
</Highlight>
Works perfectly! Hope this helps someone.
I am looking for the best way to inject a dynamically built image as my background image. I can build the image and I can display it as a div but I want it as the background of my body.
<div className="App">
<mycomonent />
</div>
works but it is not what I want
<body styles="background-image: {mycomponent}"></body>
You can change using regular DOM object within React.
document.body.style.backgroundImage = `url("https://www.placecage.com/c/460/300")`;
Working Demo
The problem is this: I bring the HTML from MongoDB and charge it in react with: <div dangerouslySetInnerHTML = {{__html: products.content.title}} />. It is displayed correctly. Now, what I want is that in the HTML that I load, I can have variable settings like for example: <h2> {{product.title}} </ h2> and that when loading them from the database, React I get them correctly . I am loading the HTML in React with the webpack loader 'html-loader'. Any ideas?
Hi All,
I am using React.js for some UI components in Asp.net MVC CMS (Orchard) where I want to render a react component on a cshtml page multiple times (depends on user) with dynamic ids. E.g. I am generating a GUID on cshtml page and creating a div by appending GUID in div's id on this page. As this page/view will act like a partial view and can be added number of times from Admin panel to a single page by the Admin.
index.cshtml:
var id = Guid.NewGuid().ToString().HtmlClassify();
<div class="container clearfix htmlcontent" id="modelCodeLookupContainer_#id">
index.tsx:
//and render it with something like below:
ReactDOM.render(
<ModelCodeLookUpReact />,
document.getElementById('modelCodeLookupContainer_' + id)
);
Please advise.
I'm new to AngularJS. In our project, we're forced to create our web app(multi-pages) in angularJS, though we know AngularJS is only for SPA.
At the moment I've a homepage, which is created in AngularJS and all other connected pages are in jQuery.
I've created a navBar in the Homepage, which needs to show up on all other pages as well.
But at the moment the navBAr data is not showing up in the other pages.
How could I do that?
How do I reuse my navCtrl in all the pages?
Please note that footer is still in jQuery, and will have to do the same with that as well.
This is how my homepage looks as of now:
<body ng-app="App">
<nav ng-controller="navCtrl"></nav>
<main ng-controller="mainCtrl"></main>
<footer></footer>
</body>