🥹 I found the answer:

"use client";
import ReactDOMServer from 'react-dom/server';
...
function this_runs_at_client_side(){
    let x = document.getElementById("content") as HTMLElement;
    x.innerHTML = ReactDOMServer.renderToString(<>jsx here</>)
}
...

Oh boy it hurts my eyes

react-dom/server is for the server, did you try this client-side ?

you'll find this documentation interesting https://react.dev/reference/react-dom/client/createRoot

JSX is a language that is compiled to JavaScript, it can run as is into your browser, so this code only works in the context of .jsx/.tsx files that are properly built at some point to become actual JS

what's your use case ?

I am trying to change the innerHTML of an element "use client" and when someone starts typing inside a search box, I am sorting the cards on the page, so, these cards are renderd using jsx with innerHTML.

I agree with your point that calling a server side function from client side is dangerous 🤣

I want exactly something like:
ReactDOMServer.renderToString
but like:
ReactDOMClient.renderToString

this is the function

I think they’re trying to implement the chip input component. Something like this https://claytongulick.github.io/chip-input/index.html

They’re just kinda bad at explaining the problem

^

um, what?

I am trying to make the searchbox use jsx on this webpage:
https://litexlthemes.vercel.app/themes

onInput -> the innerHTML of the card's container should change

but I am using plain string to changethe content and not the jsx

Well ok, I give up, I don’t and can’t understand whatever you are trying to do

ok, let me ask this question in the easiest way possible:

Is there a function to convert jsx to html? that works on the client side?

I just need something exactly like:
ReactDOMServer.renderToString()
But that runs on the client side

this is the best way I can explain my question

Hi Rohan, I feel like you are not very familiar with React

in React you are supposed to use state to implement such a use case

unless you really have a good reason to do that

I agree, I am trying to use state but inside an async function, will that work?

yes but you are not showing any async function in your code ?

My complete code is this:
https://github.com/RohanVashisht1234/litexlthemes/blob/main/src/app/themes/page.tsx

on_search is not async

But the export default function page is

ah ok I see you are using a server component

ok so you need to split your code

in the async part, the RSC, just get the data with await

and pass it down directly to a client component

then in the client component code as you are used too in React

what you are trying to do here is adding state to server component by writing pure JS

Yes

basically you are using the RSC as an HTML template and coding normal JavaScript

which may be fine in some case but probably not what you want, you are confused between 2 worlds, you need to pick one

Ok, thanks a lot.