inserting a string of html
Answered
Whimbrel posted this in #help-forum
WhimbrelOP
I am using micromark instead of remark for converting MD to html
This is the page.js
The Content component returns a html of type string
How do I insert it as a html?
This is the page.js
import {slugcheck} from '../../components/blogcomp/slugcomp/posts'
import {Content} from '../../components/blogcomp/slugcomp/content'
export default function Page(
{ params } )
{
const flag = slugcheck(params.slug);
if (flag) {
return (
<> <p>
<Content slug={params.slug} />
</p>
</>
)}
else {
return (
<>
<h2>page not found.</h2>
</>
)
}
}The Content component returns a html of type string
How do I insert it as a html?
9 Replies
@Whimbrel I am using micromark instead of remark for converting MD to html
This is the page.js
import {slugcheck} from '../../components/blogcomp/slugcomp/posts'
import {Content} from '../../components/blogcomp/slugcomp/content'
export default function Page(
{ params } )
{
const flag = slugcheck(params.slug);
if (flag) {
return (
<> <p>
<Content slug={params.slug} />
</p>
</>
)}
else {
return (
<>
<h2>page not found.</h2>
</>
)
}
}
The Content component returns a html of type string
How do I insert it as a html?
* Rewrite Content to return react nodes instead of string because react components are not supposed to return html strings
* Or use dangerouslySetInnerHtml only if you trust that html
* Or use dangerouslySetInnerHtml only if you trust that html
WhimbrelOP
if (flag) {
const markup = {"__html": Content(params.slug)};
return (
<>
<div dangerouslySetInnerHTML={markup} />
</>
)This is printing
[object Promise]
[object Promise]
You need to show me how you implemented that component
WhimbrelOP
import {micromark} from 'micromark' const fs = require('fs')
export async function Content({ slug }){
const path = '/data/data/com.termux/files/home/forjs/radix/forrad/posts/' + slug + ".md";
const data = fs.readFileSync(path).toString();
const content = micromark(data);
return (
<div> {content}
</div>
)
}@Whimbrel import {micromark} from 'micromark' const fs = require('fs')
export async function Content({ slug }){
const path = '/data/data/com.termux/files/home/forjs/radix/forrad/posts/' + slug + ".md";
const data = fs.readFileSync(path).toString();
const content = micromark(data);
return (
<div> {content}
</div>
)
}
Change it to <div dangerouslySetInnerHtml={{ _html: content }} />
Answer
WhimbrelOP
Hey it works!!!
Thanks for the help!
Thanks for the help!