Create nested JSX elements from multi-level nested array of objects reactjs

Question

I have the following JSON structure and I need to convert it to an equivalent JSX element structure. The tags can be arbitrary and it can be infinitely nested.

[
  {
    "tag": "div",
    "children": [
      {
        "tag": "p",
        "text": "hey",
        "style": {
          "color": "red",
          "fontSize": "12px"
        }
      }
    ]
  },
  {
    "tag": "div",
    "text": "Yo"
  }
]

Should be rendered as

<div>
  <p 
    style={{ 
      color: 'red',
      fontSize: '12px'
    }}>hey</p>
</div>
<div>Yo</div>

How many levels of children elements do you have?

Shubham Khatri
– Shubham Khatri

2019-09-13 04:55:42 +00:00
Commented Sep 13, 2019 at 4:55 — Shubham Khatri
– Shubham Khatri, Commented Sep 13, 2019 at 4:55
@ShubhamKhatri theoretically infinite

David Alsh
– David Alsh

2019-09-13 04:56:41 +00:00
Commented Sep 13, 2019 at 4:56 — David Alsh
– David Alsh, Commented Sep 13, 2019 at 4:56
Have you tried anything so far?

Baboo
– Baboo

2019-09-13 04:58:28 +00:00
Commented Sep 13, 2019 at 4:58 — Baboo
– Baboo, Commented Sep 13, 2019 at 4:58
sadly, nothing valuable

David Alsh
– David Alsh

2019-09-13 05:01:19 +00:00
Commented Sep 13, 2019 at 5:01 — David Alsh
– David Alsh, Commented Sep 13, 2019 at 5:01

Shubham Khatri · Accepted Answer · 2019-09-13 05:03:02Z

3

You can recursively call a function and return the rendered element using React.createElement

function renderData(data) {
  return data.map(item => {
    return React.createElement(
      item.tag,
      { style: item.style },
      item.children ? renderData(item.children) : item.text
    );
  });
}
function App() {
  return <div className="App">{renderData(data)}</div>;
}

Working demo

answered Sep 13, 2019 at 5:03

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

2 Comments

Shubham Khatri Over a year ago

David, let me know if the above answer helps you or not

Maiya Over a year ago

If it did not help him, it helped me (as I only knew how to do it w/ JSX).

Maiya · Accepted Answer · 2019-09-13 05:34:45Z

Here's a JSX version.

Notice that the recursive call is only called if there are children.

 const data = [
  {
    "tag": "div",
    "children": [
      {
        "tag": "p",
        "text": "hey",
        "style": {
          "color": "red",
          "fontSize": "12px"
        }
      }
     ]
   },
   {
    "tag": "div",
    "text": "Yo"
  }
 ];


const Elements = ({elements}) => {
    return (
      <React.Fragment>
         {elements && elements.map(element => {
            let {tag, text, children, style} = element
            if(tag === "div") {
                 return(
                    <div style={style ? style: {}}>{text}
                       {children && <Elements elements={children}/>}
                     </div>
                   )
             } else if(tag === "p") {
                 return(
                    <p style={style ? style: {}}>{text}
                       {children && <Elements elements={children}/>}
                   </p>
                  )
            } 
        })}
     </React.Fragment>
);}

function render() {
  ReactDOM.render(<Elements elements={data} />, document.getElementById("root"));
}

render();

Spazcool · Accepted Answer · 2021-07-19 21:20:01Z

1

Adding on to Khatri's example, above, you can return an array within a ternary. My need required showing nested ul > li's and that addition fit my problem.

function renderData(data) {
 return data.map(item => {
  return React.createElement(
   item.tag,
   { style: item.style },
   item.children ? [item.text, renderData(item.children)] : item.text
  );
 });
}

function App() {
 return <div className="App">{renderData(data)}</div>;
}

answered Jul 19, 2021 at 21:20

Spazcool

111 silver badge2 bronze badges

Collectives™ on Stack Overflow

Create nested JSX elements from multi-level nested array of objects reactjs

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related