How to convert React drag and drop page builder state to working html/css/js page
Recently, I am working to build a drag and drop UI builder for react based app frameworks. Before implementing drag and drop functionality, I am trying to render a page layout according to structured array stored in my state.
My question is, How can I render actual components with events such as OnClick, OnChange. Since I'm using "ReactDOMServer.renderToStaticMarkup" to convert the component to html/css, events are not triggering. Can someone provide me a way forward from here. I have added a sample code here. My plan is to use next js and SSR to render the page. Since converting the component to html/css, my event triggers are not triggering, I'm stuck here. I would love to see an example if someone can provide.
Sample - https://codesandbox.io/s/zeus-research-b61lwo?file=/src/Component.js:356-391
I'm answering my own question if someone thinking of following the same way of mine. I made a mistake by converting the react component to html/css and use dangerouslySetInnerHTML to render it. Instead of that, I'm going to render react component it self. So far, It is working. Ill update the answer if I get any issues.
- Chunk downloading of the big files right to the hard drive
- My custom CSS transition animation is not working on hover after I added AOS JS library
- how to get the Google analytics client ID
- Toggle vue-multiselect close/open on button click
- Best way to filter an objects's properties for data
- Passing function with arguments as a prop and invoking it internally in React
- Outlook calendar don't render with FullCalendar
- Is there a way to validate and allow only https url's using .isUri i.e. without using Regex in JavaScript?
- How to clear react native webview cookies?
- Skipping a test in Cypress conditionally
- How can I get all the HTML in a document or node containing shadowRoot elements
- Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; }
- Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- Is there is a C# function which is similar to .Map() in JavaScript?
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- How do I test a Node.JS Script that is not a module and runs as soon as it's called?
- Set element width based on a string that is not in the element
- Testing JavaScript Written for the Browser in Node JS
- Where are the trailing commas coming from in these radio buttons?
- How to verify a signature from the Phantom wallet?
- How to get the value of a Google Chrome flag using Javascript
- event.preventDefault cannot block clipboard paste in chatgpt.com prompt box
- Should I use ref or findDOMNode to get react root dom node of an element?
- Disable button for 5 seconds with different label and change after it
- JavaScript - Get all but last item in array
- React-Redux: Should all component states be kept in Redux Store
- Is it possible to use Closure Compiler ADVANCED_OPTIMIZATIONS with jQuery?
- Capture selected option returns not defined instead
- Uncaught TypeError: matchExpr[type].exec is not a function