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?
Related
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>
}
I have a simple React site up and when I go to "View Source" in Chrome, It doesnt show much of the markup.Mostly JS imports. But if I click on an element with Dev tools up, it shows me the html as I would normally see it.
Can someone explain this to me?
Thanks
View source will have the the content what you have in build/index.html or public/index.html
index.html will have some <script> tags. Browser executes these JavaScript files in script tag and renders the page. We can say this as dynamic code or runtime generated html, css and other code.
So View Source will show only static contents, that is what you have in index.html. Its same as if you open index.html in any editor like notepad.
Where as when using dev tools you will see all runtime generated code. That is what dev tools indend to do.
And if you need to see the React components, state, props and other details, you need to use React dev tools for chrome
A simple example would be:
index.html
<html>
<body>
<div id="app"></div>
<script>
document.getElementById("app").innerHTML = "Hello World";
</script>
</body>
</html>
You will see the above code in View Source.
You will see below code in dev tools
<html>
<body>
<div id="app">Hello World</div>
<script>
document.getElementById("app").innerHTML = "Hello World";
</script>
</body>
</html>
Hope this is clear.
The actual source is mostly JS, between libraries that react uses, libraries you've imported, and the JS you've written.
When you write a view, typically in .jsx format, it is JS that is translated into HTML. So after the dom has populated by using the combination of the libraries and what you have written it is then available to view the html in the DOM, but the source will still only display the JS.
Sudo example
example.jsx
...
render() {
const example = ['a', 'b', 'c'];
return ( <div> { example.map((val) => (<p>{val}</p>)) } </div> }
}
...
Source
...
require('example.js')
...
DOM
...
<div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>
...
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
I have an angular app with a page and dynamic content.
I use ui router for routing.
I want user to see static html which server side rendering will return it, and when angular is loaded, change html content with ur router templates.
sample static html is:
<div ui-view>
<div>Lorem Ipsum</div>
<p>Lorem Ipsum</p>
<span>Lorem Ipsum</span>
<div>
sample ui router template is:
<div>
<div>{{myModel}}</div>
<p>{{myModel2}}</p>
<span>Lorem Ipsum</span>
<div>
My aims:
User should see some static html, before dynamic content is loaded. Dynamic content will replace it.
Search engines should track static files, not something like <p>{{myModel2}}</p>
I think you can make static content visible before ui-router is resolved like this:
<ui-view>
<div>Lorem Ipsum</div>
<p>Lorem Ipsum</p>
<span>Lorem Ipsum</span>
</ui-view>
Using ui-view as custom tag will render inner HTML without any changes to it, however when route is resolved this content will be replaced with actual route template.
I have an angular application where angular summernote texteditor is added in header text. It is working but my problem is when I am adding the header text, it is wrapped with a <p></p> tag. and when I display it on preview page, <p></p> tag is also exist there.
How can I remove html tags when saving data to JSON file?