How to render html elements in Reactjs?

Question

I am really new to reactjs and still learning it.

I am trying to return the file tree view but it is showing all the elements on the page like this..

<ul className='folder-container'>
  <li className='folder-item'> app </li>
  <li className='folder-wrapper'><ul className='folder-container'><ul className='folder-container'>
  <li className='file-item'> index.html </li></ul><ul className='folder-container'>
  <li className='folder-item'> js </li>
  <li className='folder-wrapper'>
<ul className='folder-container'>....

I want to return the list of all items inside folders on the page. I thought I could return it using the function inside the component. Am I doing it correctly?

My Code:

class Filetree extends Component {
  constructor({ props }) {
    super(props);
    this.state = {
      folders: [
        {
          type: "dir",
          name: "app",
          children: [
            {
              type: "file",
              name: "index.html"
            },
            {
              type: "dir",
              name: "js",
              children: [
                {
                  type: "file",
                  name: "main.js"
                },
                {
                  type: "file",
                  name: "app.js"
                },
                {
                  type: "file",
                  name: "misc.js"
                }
              ]
            }
          ]
        },
        {
          type: "dir",
          name: "css",
          children: [
            {
              type: "file",
              name: "reset.css"
            },
            {
              type: "file",
              name: "main.css"
            }
          ]
        }
      ]
    };
  }

  displayJsonTree(data) {
    var htmlRetStr = `<ul className='folder-container'>`;
    for (var key in data) {
      if (typeof data[key] === "object" && data[key] !== null) {
        htmlRetStr += this.displayJsonTree(data[key]);
        htmlRetStr += `</ul>`;
      } else if (data[key] === "dir") {
        htmlRetStr += `<li className='folder-item'> ${
          data["name"]
        } </li> <li className='folder-wrapper'>`;
      } else if (key === "name" && data["type"] !== "dir") {
        htmlRetStr += `<li className='file-item'> ${data["name"]} </li>`;
      }
    }
    return htmlRetStr;
  }

  render() {
    const { folders } = this.state;

    return <div>{this.displayJsonTree(folders)}</div>;
  }
}

Tholle · Accepted Answer · 2018-07-11 11:33:45Z

2

You can use dangerouslySetInnerHTML if you have HTML in a string.

render() {
  const { folders } = this.state;

  return <div dangerouslySetInnerHTML={{ __html: this.displayJsonTree(folders) }} />;
}

answered Jul 11, 2018 at 11:33

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

6 Comments

Jaz Over a year ago

it works. But is it recommended to return html like this? Using this dangerouslySetInnerHTML={{ __html: this.displayJsonTree(folders) }}

Jaz Over a year ago

is there any better way to do?

Tholle Over a year ago

@Jaz Yes, if you have HTML in a string this is the only way to do it. You should use JSX when possible instead.

Jaz Over a year ago

could you pls provide an example of how to use JSX in this code? I want to know how I can use JSX instead.

Tholle Over a year ago

@Jaz That changes the question entirely. You could create a new question asking that.

|

Collectives™ on Stack Overflow

How to render html elements in Reactjs?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related