CODEWITHSUNDEEP
reactjsmavenjhipster
Mileta Dulovic
Mileta Dulovic

Reputation: 1064

How to put props in array

I have a problem with this ReactJS code. It is a project generated with jHipser which is a thing that I am new with.

So I am using <MDBDataTable striped hover bordered small data={data}/>

data has to be in this format 

const data = {
      columns: [
        {...}
      ],
      rows: [
        {...}
      ]
   };

My data is gathered through props and stored like this

const { bookList, match } = this.props;

columns are fixed and they are populated as they should be. I need to populate rows with data that is stored in bookList. Any ideas on how to do this?

I am pretty new to React so go easy on me :)

EDIT

Here is an example of how bookList looks like

0:
  id: 1
  records: null
  serialNumber: "enable Gorgeous Frozen Pants"
  yearRange:
    createdAt: "2019-11-04T13:28:16Z"
    firstYear: 37454
    id: 1
    lastYear: 79654
    updatedAt: "2019-11-05T07:53:08Z"

I have more of them. I got closer to solution by trying this

rows: [
        {
          id: `${bookList.map(result => result.id)}`,
        }
      ]

But it puts all ID's from bookList into this one id and displays them into one row in table. I need to create as many rows as there are elements in bookList.

Upvotes: 1

Views: 70

Answers (2)

Brian Thompson
Brian Thompson

Reputation: 14395

Map the values into the rows array and not into the id key.

const data = {
  columns: [{...}],
  rows: bookList.map(book => (
    { id: book.id, ...add all keys you need here... }
  ) 
}

Upvotes: 1

0000
0000

Reputation: 26

columns are array of json which have keys field and label

now your rows should have data with keys as field values in columns

for example if

columns: [
  {
    label: 'Name',
    field: 'name'
  },
  {
    label: 'Position',
    field: 'position'
  }]

then rows should be like

rows: [
  {
    name: 'Tiger Nixon',
    position: 'System Architect'
  },
  {
    name: 'Garrett Winters',
    position: 'Accountant'
  }]

try to change your booklist in this way.

Upvotes: 0

Related Questions