Display html markup in react jsx

Question

Wanted to display straight up html markup into my template.

Here is the file where I am writing html code that I want to display. I want to display all the html elements.

import React from 'react';

const html = (
  <div>
      <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
      </ul>
  </div>
);

export default html

component file

import React, { Component } from 'react';
import html from './code/htmlCodeSnippet';

...
  render() {
    return (
      <div>
        {html}
      </div>
    )
  }
}

I am importing that html file to be displayed in my component. I will be using an html highlighter to display the code.

Whenever I reference {html}, it doesnt show all the html elements. It just shows as

1
2
3

@lakerskill What do you mean? Because when i look at the page, none of the elements are being shown. — Richard Bustos
– Richard Bustos, Commented Mar 27, 2019 at 15:47

Sahil Raj Thapa · Accepted Answer · 2019-03-27 16:38:52Z

5

you need to make few changes. first change html to a string i.e

const html = `
   <div>
      <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
      </ul>
      <p>hello</p>
  </div>`;

And use pre and code elements to wrap html in render method i.e

<pre><code>{html}</code></pre>

answered Mar 27, 2019 at 16:38

Sahil Raj Thapa

2,4833 gold badges16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display html markup in react jsx

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related