Rendering raw html with reactjs

by

There are now safer methods to render HTML. I covered this in a previous answer here. You have 4 options, the last uses dangerouslySetInnerHTML.

Methods for rendering HTML

  1. Easiest – Use Unicode, save the file as UTF-8 and set the charset to UTF-8.

    <div>{'First ยท Second'}</div>

  2. Safer – Use the Unicode number for the entity inside a Javascript string.

    <div>{'First \u00b7 Second'}</div>

    or

    <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

  3. Or a mixed array with strings and JSX elements.

    <div>{['First ', <span>&middot;</span>, ' Second']}</div>

  4. Last Resort – Insert raw HTML using dangerouslySetInnerHTML.

    <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

More Related Contents:

  1. “SyntaxError: Unexpected token < in JSON at position 0"
  2. ReactJS – Does render get called any time “setState” is called?
  3. Is it safe to store a JWT in localStorage with ReactJS?
  4. Invalid hook call. Hooks can only be called inside of the body of a function component
  5. ReactJS – Lifting state up vs keeping a local state
  6. TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection is not a function
  7. How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”
  8. How to pass in a react component into another react component to transclude the first component’s content?
  9. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  10. In React, what’s the difference between onChange and onInput?
  11. Github – unexpected disconnect while reading sideband packet
  12. How do you pass data when using the navigate function in react router v6
  13. How do I access store state in React Redux?
  14. Read Store’s Initial State in Redux Reducer
  15. How to pass state back to parent in React?
  16. In React.js should I make my initial network request in componentWillMount or componentDidMount?
  17. Is componentDidMount of parent called after all componentDidMount of children?
  18. Error “Error: A is only ever to be used as the child of element”
  19. ReactJS – Get Height of an element
  20. How to get selected value of a dropdown menu in ReactJS
  21. Retrieving value from with multiple option in React
  22. Images not loading when relative path is used in React
  23. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  24. Can’t call setState on a component that is not yet mounted
  25. Trying to use React.DOM to set body styles
  26. React Router BrowserRouter leads to “404 Not Found – nginx ” error when going to subpage directly without through a home-page click
  27. How to have nested loops with map in JSX?
  28. Destructuring of es6 but passing dynamic variable
  29. updateProfile is not a function (Firebase)
  30. Get scroll position with Reactjs

Leave a Comment