For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
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
Solved! Go to the solution
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} />
)
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
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.
Thank's
Shubham
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.
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!
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, }))} /> )
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} />
)
Omg. You are the best. Such an easy fix but I spent HOURS on this earlier 😂. Thanks so much!