How to parse html to React component?

by

You probably want to look deeper into dangerouslySetInnerHTML. Here is an example how to render HTML from a string in a React component:

import React from 'react';
import { render } from 'react-dom';

const htmlString = '<h1>Hello World! 👋</h1>';

const App = () => (
  <div dangerouslySetInnerHTML={{ __html: htmlString }} />
);

render(<App />, document.getElementById('root'));

Full example here: https://codesandbox.io/s/xv40xXQzE

Read more about dangerouslySetInnerHTML in the React docs here: https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

More Related Contents:

  1. How to Protect website code PHP / JS? [closed]
  2. How to create a translucent in React Native?
  3. Why calling setState method doesn’t mutate the state immediately?
  4. Insert HTML with React Variable Statements (JSX) [duplicate]
  5. Render HTML string as real HTML in a React component
  6. When to use functional setState
  7. Concatenating variables and strings in React
  8. ReactJS – .JS vs .JSX
  9. React.js: Set innerHTML vs dangerouslySetInnerHTML
  10. How to render HTML string as real HTML?
  11. ReactJS: “Uncaught SyntaxError: Unexpected token
  12. How to add custom html attributes in JSX
  13. javascript change background color on click [closed]
  14. React: how to load and render external html file?
  15. Updating source URL on HTML5 video with React
  16. Where’s the connection between index.html and index.js in a Create-React-App application?
  17. Support for the experimental syntax ‘jsx’ isn’t currently enabled
  18. css position absolute making the textbox go down
  19. How do you import a javascript package from a cdn/script tag in React?
  20. Adding a new line in a JSX string inside a paragraph – React
  21. React.js this.props.data.map() is not a function
  22. Using Matter.js to render to the DOM or React
  23. React: Script tag not working when inserted using dangerouslySetInnerHTML
  24. render html in state string [duplicate]
  25. React, losing saved data in localStorage with useEffect after page refresh
  26. Infinite scrolling with React JS
  27. Images not loading when relative path is used in React
  28. Next.js: Error: React.Children.only expected to receive a single React element child
  29. Measuring text width/height without rendering
  30. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes

Leave a Comment