WebComp
  • Introduction
  • Lifecycle Methods
  • Rendering From String
  • Handling User Input
  • Flags
  • Events
  • Context
  • Shadow DOM
  • Routing
Powered by GitBook
On this page

Was this helpful?

Rendering From String

If for any reason you don't want to use JSX, you can render component from string or template tag.

Rendering from string is extremely simple. The syntax is very similar to stateless components, but instead of returning JSX your function should return a string:

const SuperHeader = ({ text }) => `
  <div>
    <h1>${text}</h1>
    <h3>It's Superpowered!</h3>
  </div>
`;

Your component function will have the props argument that you can use for interpolation (i.e. via ES6 template string).

Note that string render doesn't support state and lifecycle methods.

PreviousLifecycle MethodsNextHandling User Input

Last updated 6 years ago

Was this helpful?