How to convert html elements into JSX?

Question

I have basically two questions.

1.) I have this basic reactjs component. How can I convert it into JSX? I mean I want this code to look like reactjs style code.

2.) If I receive an array from backend like this

  [ '/parent-folder-1/child-folder-1/file1.jpg', '/parent-folder-1/child-folder-1/file2.jpg', '/parent-folder-1/child-folder-2/file3.jpg', '/parent-folder-2/child-folder-1/somefile.jpg' ]

How can I create nested object dynamically like the one shown in the code? I don't know how deep nested it could be.

Any help would be really appreciated......

class Filetree extends Component {
      constructor() {
        super();
        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: "misc.js"
                    }
                  ]
                }
              ]
            }
        };
      }

      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 dangerouslySetInnerHTML={{ __html: this.displayJsonTree(folders) }} />;
      }
    }

Answer 1

One way would be a recursive technique. Use the object properties to determine what type of component to render, what it's props should be and what children it should have. You can use React.createElement(...) for that. Here's a snippet I did for recursively rendering a nested object. It'll be different depending on the shape of your data and various other things of course, but it's a starting point:

recursivelyRenderLinks(element) {
    const { children, ...props } = element;
    return React.createElement(
        TitleLink,
        props,
        children.length > 0 ?
        children.map((child) => this.recursivelyRenderLinks(child)) : null
    );
}

As for building that nested object from the array in the first place, that's another task you'd have to do first. Maybe split this into 2 separate questions.