convert object array to react component

Question

We have object array like below,

const obj = {
  1: [{
    row: 1,
    name: 'file1'
  }, {
    row: 1,
    name: 'file2'
  }],
  2: [{
    row: 2,
    name: 'file3'
  }]
}

Based on that above element I want to generate react component like below

  <React.Fragment>
    <h2>Elment: 1</h2>
     <div>file1</div>
     <div>fiel2</div>
    <h2>Element: 2</h2>
     <div>file3</div>
   </React.Fragment>

I want to see how we can fit React.Fragments for this sample object.

Update

Just to clarify Element: {key}, where the key is taken from object key.

Omar K · Accepted Answer · 2018-04-15 00:06:00Z

2

import React from "react";
import { render } from "react-dom";

const obj = {
  1: [{ row: 1, name: "file1" }, { row: 1, name: "file2" }],
  2: [{ row: 2, name: "file3" }]
};

class App extends React.Component {
  render() {
    const data = Object.keys(obj).map(key =>
      obj[key].map((item, index) => (
        <React.Fragment>
          {index < 1 && <h1> Element {key} </h1>} {}
          <strong> File: </strong> {item.name}{" "}
        </React.Fragment>
      ))
    );
    return (
      <div>
        <p>IM THE APP</p>
        {data}
      </div>
    );
  }
}
render(<App />, document.getElementById("root"));

This is how you would do it, all thats left for you to do is organize, order, and style it inside of the map.

In depth:

The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

 const data = Object.keys(obj).map(key =>
  obj[key].map((item, index) => (
    <React.Fragment>
      {index < 1 && <h1> Element {key} </h1>} {}
      <strong> File: </strong> {item.name}{" "}
    </React.Fragment>
  ))
);

Once we do Object.keys(obj) we map through the keys with Object.keys(obj).map and use that to access one array of objects at a time inside of the original object. Inside of our other map function we map that current array and return our jsx.

edited Apr 15, 2018 at 0:06

answered Apr 14, 2018 at 23:06

Omar K

3,4213 gold badges25 silver badges41 bronze badges

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

2 Comments

user1595858 Over a year ago

thanks for solution. But the Element#1 should be repeated once and is it possible to use Fragment?

Omar K Over a year ago

still need help? im here and ready if you need it let me know

Sreekanth · Accepted Answer · 2018-04-15 00:03:25Z

0

It would be much easier to code and maintain, if you flatten your input object.

may be convert the existing

const obj = {
  1: [{
    row: 1,
    name: 'file1'
  }, {
    row: 1,
    name: 'file2'
  }],
  2: [{
    row: 2,
    name: 'file3'
  }]
}

const obj = [{
  row: 1,
  names: ['file1', 'file2']
}, {
  row: 2,
  names: ['file3']
}]

Once the conversion is done, it would be a very simple iteration using maps and Components.

A detailed solution with code is here at Stackblitz link

Working solution Output

answered Apr 15, 2018 at 0:03

Sreekanth

3,13014 silver badges22 bronze badges

Collectives™ on Stack Overflow

convert object array to react component

Update

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related