Reputation: 1064
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
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
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