Stringify JSX
Unanswered
Arinji posted this in #help-forum
ArinjiOP
ok so im currently using dangerouslySetInnerHTML a bunch of html (stringified)
Now i wanna use
But to actually use it.. i need to make a tsx file and use it as a element, so thats what i did
renderToStaticMarkup: https://react.dev/reference/react-dom/server/renderToStaticMarkup
(Chatgpt showed me it, looks correct here)
I call this function from here
But when i use it.. i get this error
Any idea on how do i do this correctly?
TLDR: I need to return a string form of the code element, but also use the Code element
(use client wont work)
Now i wanna use
import { Code } from "bright";
But to actually use it.. i need to make a tsx file and use it as a element, so thats what i did
import { Code } from "bright";
import { renderToStaticMarkup } from "react-dom/server";
export function CodeElement({
language,
code,
}: {
language: string;
code: string;
}) {
const string = renderToStaticMarkup(<Code lang={language}>{code}</Code>);
return string;
}
renderToStaticMarkup: https://react.dev/reference/react-dom/server/renderToStaticMarkup
(Chatgpt showed me it, looks correct here)
I call this function from here
import { CodeElement } from "./codeElement";
export function CodeHTML({ node }: { node: any }) {
console.log(node);
const codeStrings = node.fields["Code Blocks"].map((field: any) => {
/* console.log(
field.blockType.toLowerCase(),
field[field.blockType.toLowerCase()]
);
*/
const string = CodeElement({
language: field.blockType.toLowerCase(),
code: field[field.blockType.toLowerCase()],
});
return string;
});
return codeStrings.join("\n");
}
But when i use it.. i get this error
× You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
│ Learn more: https://nextjs.org/docs/getting-started/react-essentials
â•â”€[C:\Users\arinj\OneDrive\Desktop\docs\src\app\en\article\[link]\serilazer\converters\blocks\code\codeElement.tsx:1:1]
1 │ import { Code } from "bright";
2 │ import { renderToStaticMarkup } from "react-dom/server";
· ────────────────────────────────────────────────────────
3 │
4 │ export function CodeElement({
4 │ language,
╰────
Any idea on how do i do this correctly?
TLDR: I need to return a string form of the code element, but also use the Code element
(use client wont work)
46 Replies
ArinjiOP
ping me if someone responds :D
You mean you want to show some code in the HTML?
@<Milind ツ /> You mean you want to show some code in the HTML?
ArinjiOP
It's just a normal html element
I want to get it in a string format.. or some way to use it in the dangerouslySetInnerHTML
What type of data are u trying to put?
@<Milind ツ /> What type of data are u trying to put?
ArinjiOP
Have you used payload cms before?
Not really no.
If it's like a blog website with a cms to manage all the blog.
Or just anything that involves crud, i did used that
Or just anything that involves crud, i did used that
@<Milind ツ /> Not really no.
ArinjiOP
Ok so very long story short.. they provide back a huge json response.
Now what you would do is parse that json... And return html strings
So like a string
"<Html>"
Got that?
"<Html>"
Got that?
Say, for an object property,
"Name": "test"
It parses it inside a p tag?
"Name": "test"
It parses it inside a p tag?
Interesting. I saw something like this somewhere
ArinjiOP
So it would return
"
"
<p>${name}</p>
"ArinjiOP
I'm trying to keep it on the server though
So most create dom elements wont work
Actually wait
Instead of parsing in this way, why not fetch the json and map it as normal jsx?
Trust me on this
Imma explain you what's happening
Be with me son, we getting though this together lol
Tell me if your ready lol, don't wanna explain to nobody
Maybe just a drop the reason in a nutshell
ArinjiOP
Yea that's my plan
Tbh showing as jsx would work fine imo
ArinjiOP
Ok so there are 2 imp files I want you to check
Don't worry much about it, just know that it is recursively called a bunch of times
Ok so see how it keeps tryna do
converters.find?
converters.find?
So basically imagine it currently has a p tag in the json.. like a value which says this is a paragraph
It gets this file..gets the html strings from the file and stores it
Got it? That's the whole thing
Wait a moment.. couldnt It just be an array.. and each converter returns jsx?
Tell me if I'm dumb
https://github.com/payloadcms/payload/blob/main/packages%2Fplugin-form-builder%2Fsrc%2Futilities%2Flexical%2FserializeLexical.ts#L32-L60
Couldn't I just make this an array
https://github.com/payloadcms/payload/blob/main/packages%2Fplugin-form-builder%2Fsrc%2Futilities%2Flexical%2FserializeLexical.ts#L32-L60
Couldn't I just make this an array
I am not sure. I still can't get what ur actual reason is to do all the converting and not showing as normal jsx.
But anyway, guess I have no solution for this pro stuff
ArinjiOP
It's not pro :( but lemme try and do sm stuff
If any actual pro comes.. plz lemme know lol
ArinjiOP
@<Milind ツ /> IT WORKED
@Arinji Wait a moment.. couldnt It just be an array.. and each converter returns jsx?
ArinjiOP
for a very niche case, this works lmao
coolz