How to process an Array with object properties to generate react elements

Question

I am new to react and came from a jQuery background. I wanted to process an array of DOM elements that could be existed dynamically/randomly in the document. The properties define the Dom element type, attributes, and location via its parent.

I managed to achieve this with JQuery looping through the array and injecting HTML elements under its respectful parent using .appendTo() without defining a nested function using react.CreateElement to deal with each array item on a case per case bases.

//Array Example
 
       var data = [
                {
                    "component": "div",
                    "attributes": {
                    "id": "grid00",
                    "className": "grid"
                    },
                    "parent": "header"
                },
                {
                    "component": "div",
                    "attributes": {
                    "id": "row00",
                    "className": "row"
                    },
                    "parent": "grid00"
                },
                {
                    "component": "div",
                    "attributes": {
                    "id": "pivot00",
                    "className": "ms-Pivot ms-Pivot--large ms-Pivot--tabs tab-content"
                    },
                    "parent": "row00"
                },
                {
                    "component": "ul",
                    "attributes": {
                    "id": "pivotLinks00",
                    "className": "ms-Pivot-links nav-pills"
                    },
                    "parent": "pivot00"
                }
            ]

//JQuery Code Sample: 

            for(var i = 0; i < data.length;i++){
                $(`<${data[i].component} id="${data[i].attributes.id}" class="${data[i].attributes.className}">This is ${data[i].attributes.id} </${data[i].component}>`).appendTo(`#${data[i].parent}`);
                
                }

div{
border-style: solid;
padding-left: 10px;
padding-right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header"></div>

I was trying to put something together in react like the below but not getting my head around it to create the elements in a nested manner similar to JQuery even though I am passing the parent element Id, they are created on the same level (HTML end results in the screenshot):

 var data = [
                {
                    "component": "div",
                    "attributes": {
                    "id": "grid00",
                    "className": "grid"
                    },
                    "parent": "header"
                },
                {
                    "component": "div",
                    "attributes": {
                    "id": "row00",
                    "className": "row"
                    },
                    "parent": "grid00"
                },
                {
                    "component": "div",
                    "attributes": {
                    "id": "pivot00",
                    "className": "ms-Pivot ms-Pivot--large ms-Pivot--tabs tab-content"
                    },
                    "parent": "row00"
                },
                {
                    "component": "ul",
                    "attributes": {
                    "id": "pivotLinks00",
                    "className": "ms-Pivot-links nav-pills"
                    },
                    "parent": "pivot00"
                }
            ]
                     
const ProcessObject = (props) => {  
  return props.data.map((data, index) => <Node key={index} {...data}/>)
}
                        
function Node(props){
  return (
      React.createElement(`${props.component}`,{id: props.attributes.id},`this is ${props.attributes.id}`, document.getElementById(props.parent))
  );
}

class App extends React.Component {
 	render() {
  	return (
    	<div>
    	  <div className="header">Header</div>
        <ProcessObject data={data}/>
    	</div>
    );
  }	
}

ReactDOM.render(
  <App/>, document.getElementById('mountNode')
);

div{
border-style: solid;
padding-left: 10px;
padding-right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="mountNode"></div>

Subham Dey · Accepted Answer · 2019-11-16 20:55:15Z

2

for the updated question: React is unidirectional in nature and that is parent -> child. According to data structure, you are defining elements based on a children -> parent relationship, which wont work as far as i know using react.

For the sake of explaining to you i have created a very basic solution with an updated data structure which allows a parent -> child relationship.

const newData = [
{
component: "div",
attributes: {
  id: "grid00",
  className: "grid"
},
children: {
  component: "div",
  attributes: {
    id: "row00",
    className: "row"
  },
  children: {
    component: "div",
    attributes: {
      id: "pivot00",
      className: "ms-Pivot ms-Pivot--large ms-Pivot--tabs tab-content"
    },
    children: {
      component: "ul",
      attributes: {
        id: "pivotLinks00",
        className: "ms-Pivot-links nav-pills"
      },
      parent: "pivot00"
    }
  }
}
}
];

This way the nodes and children elements can be recursively created to form the element tree. Check this for the whole code working as you expected.

Hope this makes sense in what you are finally trying to achieve.

answered Nov 16, 2019 at 20:55

Subham Dey

1726 bronze badges

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

4 Comments

Ozie Harb Over a year ago

The explanation made sense and thanks for trying to help me out with the parent -> child relationship example. It did work on the current data-structure that you have updated, so I went ahead and added <li> elements under <ul > element but unfortunately, I couldn't add more than on the same level. One more note that I could have multiple rows on the same level that has children of other <div> and <li>.

Ozie Harb Over a year ago

I have included the multiple <li> example below: children: { component: "ul", attributes: { id: "pivotLinks00", className: "ms-Pivot-links nav-pills" }, parent: "pivot00", children: { component: "li", attributes: { id: "Links00", className: "ms-Pivot-links nav-pills" }, parent: "pivot00", }, children: { component: "li", attributes: { id: "Links01", className: "ms-Pivot-links nav-pills" }, parent: "pivot00", }, }

Subham Dey Over a year ago

you can also handle multiple children similarly by creating an array of all sibling children elements recursively. i have updated the code for multiple sibling children here : codesandbox.io/s/cold-sky-qjp0m

Ozie Harb Over a year ago

In the initial testing, I could say this is working for me, I will mark this as an answer. Many thanks for your help.

Subham Dey · Accepted Answer · 2019-11-16 12:15:01Z

1

You have the react concepts correct other than in the functional component ProcessObject, nothing is returned.

You can easity solve this by: Solution 1:

const ProcessObject = (props) => {  
  return props.data.map(data => <Node {...data}/>)
}

Solution 2:

const ProcessObject = (props) => props.data.map(data => <Node {...data}/>)

answered Nov 16, 2019 at 12:15

Subham Dey

1726 bronze badges

2 Comments

Ozie Harb Over a year ago

Appreciate the help, this has helped me to compile my code, I have updated my question and added more clear details with working react code.

Subham Dey Over a year ago

ok. i have added a new answer since now the question is very different after your update.

Mojo · Accepted Answer · 2019-11-16 14:34:05Z

0

As you are new to react you should check out this lesson. That will indeed help you to get a clear view of how to create components form an array of data.

answered Nov 16, 2019 at 14:34

Mojo

5181 gold badge8 silver badges18 bronze badges

1 Comment

Ozie Harb Over a year ago

Thanks, defiantly could use it, but I am aware of how to render the elements in typical scenario as of all array items on under the same parent/level. But I needed help on how to render as a nested element under different parent/level. My question updated with working code and screenshot of end result

rupindr · Accepted Answer · 2019-11-17 11:58:09Z

0

Edit based on updated question:

Updated fiddle: https://jsfiddle.net/hLmtq0g9/
React components can be used the same way you would use recursive functions.

const data = [
    {
        //some keys
        children: //structure of data repeats
    }
];

class Example extends React.Component {
    render(){
        <div>
            <!-- use data keys -->
            <Example data={data.children} />
        </div>
    }
}

<Example data={data} />

Older Answer: You need to use the map in render function.

const items = [
        { text: "Learn JavaScript", id: '1' },
        { text: "Learn React", id: '2' },
        { text: "Play around in JSFiddle", id: '3' },
        { text: "Build something awesome", id: '4' }
      ];

class Example extends React.Component {

  render() {
    return (
      <div>
        <h2>Todos:</h2>
        <ol>
        {items.map(item => (
          <li id={item.id}>{item.text}</li>
        ))}
        </ol>
      </div>
    )
  }
}

Play around with it here https://jsfiddle.net/utfxcnko/

edited Nov 17, 2019 at 11:58

answered Nov 16, 2019 at 10:12

rupindr

6145 silver badges14 bronze badges

1 Comment

Ozie Harb Over a year ago

I have updated my question, I am trying to create a nested structure instead of rendering all the elements on the same level. thanks for your contribution

Collectives™ on Stack Overflow

How to process an Array with object properties to generate react elements

4 Answers 4

4 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related