Getting error Invalid prop 'data' in _List Component

sgoel785
Shopify Partner
2 0 0

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 

Replies 4 (4)

Liam
Shopify Staff
2731 293 744

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!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

sgoel785
Shopify Partner
2 0 0

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
 Thank's
Shubham

yapkk
Shopify Partner
1 0 0

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
           
            },
           
          }))}
        />

 

 

 

RafaelPorras
Shopify Staff
1 0 0

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!