Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Getting error Invalid prop 'data' in _List Component

Solved

Getting error Invalid prop 'data' in _List Component

sgoel785
Shopify Partner
3 1 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 

Accepted Solution (1)
sgoel785
Shopify Partner
3 1 1

This is an accepted solution.

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 (
             <List title="items" data={listRow} />
            
    )

 
Screenshot 2024-04-30 at 3.30.46 AM.png

View solution in original post

Replies 7 (7)

Liam
Community Manager
3108 344 905

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
3 1 1

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!

Talktohenryj
Shopify Partner
148 0 31

I've done everything listed below but still seem to be having the issue. Anyone see the error in my ways? 

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


    return (

                    <List
                        title="items"
                        data={listRow.map(item => ({
                            id: item.id.toString(), // Convert id to string
                            leftSide: item.leftSide,
                        }))}
                    />
    )
sgoel785
Shopify Partner
3 1 1

This is an accepted solution.

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 (
             <List title="items" data={listRow} />
            
    )

 
Screenshot 2024-04-30 at 3.30.46 AM.png

Talktohenryj
Shopify Partner
148 0 31

Omg. You are the best. Such an easy fix but I spent HOURS on this earlier 😂. Thanks so much!