0

Good day fellow devs! Is it possible to return a jsx format from a function without using react? My project is just pure Es6 and HTML. Here's what I want to do, I want to create a separate files for functions and HTML then call the HTML format files in the functions.

For example, here's my main.js:

import renderHTML from './display/render.js';
import createElement from './functions/createElement.js';

var popup = document.getElementById('popup-container');

const HTML = `${renderHTML}`;

const Fragment = createElement(HTML);
popup.appendChild(Fragment);

Then in my renderHTML file where it's jsx format, here's the content:

export default function renderHTML() {
 return (
  <h1>I am the content! Rendered successfully!</h1>
 )
}

There, hope that made sense lol.. But yeah, the output of that is either its code or object. Any help or advice if I'm doing it wrong is much appreciated. Thank you so much and have a nice day ahead!

kai kyle
  • 31
  • 2
  • Does this answer your question? [Can I use jsx without React to inline HTML in script?](https://stackoverflow.com/questions/30430982/can-i-use-jsx-without-react-to-inline-html-in-script) – DBS Jun 17 '22 at 10:02
  • Doesn't work for me for I want to import it from a separate JS file then append it. It has a error every time that says: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at toolkitContent (main.js:86:23) – kai kyle Jun 17 '22 at 10:13

0 Answers0