Ad

How To Process An Array With Object Properties To Generate React Elements

- 1 answer

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>

enter image description here

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad