Getting error Invalid prop 'data' in _List Component

Retired Boards Appdev Extensions
1

Hi Everyone,

I creating a POS UI Extension, in which I am searching products using the search component and product-search API. I am trying to show that as a List component on the Screen. However, after doing a search data is showing in console.log but the error coming for the List component “Invalid prop ‘data’ in _List Component”. Please let me know if anyone has a perfect example of using the List component in POS UI Extension.

Thank’s
Shubham

2

Hi Shubham,

The error you’re experiencing is likely due to the format of the data you’re supplying to the List component. The data for the List component should be an array of objects and each object representing a row in the list.

Hope this helps!

3

Hi @Liam ,

Thanks for responding to the above solution, I am passing below screenshot data below. I think that is the correct format of data, please check.

Screenshot 2023-11-30 at 4.18.53 PM.jpg
Screenshot 2023-11-30 at 4.18.53 PM.jpg1428×1110 136 KB

Thank’s
Shubham

4

Hi, I am facing the same problem. I cant display the List item even I put ListRow array as my data in List component.

I have found the way to use the List component. This is the example of my code.

<List
title=“Organization List”
data={data.map((item) => ({
id: item.id, // Replace with the actual id for each item
rightSide: { showChevron: true, label: item.label },
leftSide:{label:item.label},
onPress: () => {
// Handle the onPress event for each item

},

}))}
/>

5

Hi,

We also had this error before and it was due to using a number instead of a string as id, adding id.toString() or String(id) solved it.

I hope this helps!

6

Please try the below code, this should work. The screenshot is the reference to the working code in my extension.

const listRow = [
        {   
            id: '1',
            leftSide: {
                label: "test"
            }
        },
        {
            id: '2',
            leftSide: {
                label: "test2"
            }
           
        }
    ];

    return (
             

![Screenshot 2024-04-30 at 3.30.46 AM.png|2241x837](upload://xMns6dbrGxRvwf25UbulVZ1KRK6.png)
1 Like