How to create and use a component from a jsx string loaded from database in reactjs

Question

I am trying to build a system in nextjs where user can add their own react components with variables, functions, logics and I would like to store them in a database and then load those string component in my next application so they work at run time. Here is an example of what I am trying to do

    const Home: NextPage = () => {
    const Test  = `export default function Test() {
      return (
        <div>
            <h1>Testing component loading....</h1>
        </div>
      )
    }`
    
    
    return (
      <>
          
            <Test/>
            <h1> this is a nice h1 tag</h1>
      </>
    )
  }
  
  export default Home

 

Here, Test is the an example component can assume coming from an api call. How can I load the logic and everything to work in my next application? I have react jsx parser and other things, I was able to make jsx works, but didn't get success in making js code works or logics.

I want to add the power of react in the component as well not just jsx only.

Thank you.

Answer 1

Idea is

String from DB
=> server create JSX file from string 
=> put JSX file into development env 
=> create Route to that JSX file => server proxied to that Route