How can I access nested arrays in a data object to assign as prop values for a data-grid?

Question

I have a data grid which takes array values for rows and columns. The necessary values come from a data object with 3 layers of nestin. Here is what it looks like:

export const duplicatesBySourceGridData = {

 'dataFamily':{
        'fuzzyDuplicates':{
            'columns':[
                  { key: 'id', name: 'ID' },
                  { key: 'title', name: 'Title' }
                ],
            'rows':[
                  { id: 0, title: 'Example' },
                  { id: 1, title: 'Demo' }
                ]    
        },
        'exactDuplicates':{
          'columns':[
                { key: 'id', name: 'ID' },
                { key: 'title', name: 'Title' }
              ],
          'rows':[
                { id: 0, title: 'Example' },
                { id: 1, title: 'Demo' }
              ]    
      }
    }
}

Currently, I'm trying to access them like below (Note that tooltip is a function of hovering over a graphical element, indexValue returns the value "dataFamily" and id returns either fuzzyDuplicates or exactDuplicates)

tooltip={({ id, value, color, indexValue }) => (
                        <div>
                            <Grid
                                column={duplicatesBySourceGridData[indexValue][id][`columns`]}
                                rows={duplicatesBySourceGridData[indexValue][id][`rows`]}
                            />
                        </div>                        
                    )}

This does not work, either the issue is with how I'm assigning the prop or how I'm setting up the dataObject.

Cheers.

score 2 · Accepted Answer · answered Jun 16 '20 at 17:59

2

I don't know if this will solve your issue, but you don't need to use the tick-mark string interpolation syntax to access a key in duplicatesBySourceGridData with the value stored in a variable like indexValue:

<Grid
  columns={duplicatesBySourceGridData[indexValue][id].columns}
  rows={duplicatesBySourceGridData[indexValue][id].rows}
/>

answered Jun 16 '20 at 17:59

Ethan Lipkind

1,136
5
7

Thanks, I've updated my code and this post but it didn't change anything. – Glenncito Jun 16 '20 at 18:12
1

also not sure if this is a typo but I believe the prop `column` should be `columns` – Ethan Lipkind Jun 16 '20 at 18:38
Thank you, Ethan :) That did it. – Glenncito Jun 16 '20 at 18:45
np! it's always these little things like a missing character that have me slamming my head into the desk :) – Ethan Lipkind Jun 16 '20 at 18:48

How can I access nested arrays in a data object to assign as prop values for a data-grid?

1 Answers1