Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Collections rendering invalid items variable #90

Closed
cwoolum opened this issue Sep 17, 2021 · 5 comments · Fixed by #96
Closed

Collections rendering invalid items variable #90

cwoolum opened this issue Sep 17, 2021 · 5 comments · Fixed by #96
Assignees

Comments

@cwoolum
Copy link
Contributor

cwoolum commented Sep 17, 2021

When rendering a collection, for some reason, it's trying to bind an items vairable without actually mapping it from props.

function ListingCardCollection(props) {
  var _a = props;
  return (
    <Collection
      type="list"
      isPaginated="true"
      items={items}
      {...props}
      {...getOverrideProps(props.overrides, "Collection")}
    >
      {function (item, index) {
        return (
          <ListingCard
            {...findChildOverrides(props.overrides, "ListingCard")}
          ></ListingCard>
        );
      }}
    </Collection>
  );
}
{"name":"ListingCardCollection","children":[{"children":[],"name":"ListingCard","componentType":"ListingCard","properties":{},"overrides":{},"variants":[]}],"id":"c-7m9oAaC8SO0M40Pnvu","bindingProperties":{},"componentType":"Collection","properties":{"type":{"value":"list"},"isPaginated":{"value":"true"}},"overrides":{},"variants":[]}
@dpilch dpilch self-assigned this Sep 20, 2021
@dpilch
Copy link
Contributor

dpilch commented Sep 21, 2021

Is the expected behavior that there should be no items prop?

function ListingCardCollection(props) {
  var _a = props;
  return (
    <Collection
      type="list"
      isPaginated="true"
      {...props}
      {...getOverrideProps(props.overrides, "Collection")}
    >
      {function (item, index) {
        return (
          <ListingCard
            {...findChildOverrides(props.overrides, "ListingCard")}
          ></ListingCard>
        );
      }}
    </Collection>
  );
}

@cwoolum
Copy link
Contributor Author

cwoolum commented Sep 21, 2021

The items can be passed in but they need to be destructured from the props

@frimfram
Copy link
Contributor

"items" is supposed to be a variable resulting from useDataStore hook.
Please see the golden file here: https://tiny.amazon.com/166zmdlhq



const { buttonUser } = useDataStoreBinding({
  type: "collection",  // returns zero or one or many records
  model: User,
  criteria: filterCriteria
 });

  <Collection type="list" items={ buttonUser } gap="1.5rem" backgroundColor={backgroundColor}>
  
  {(item, index) => (
  <Flex key={index} {...props} {...getOverrideProps(overrides, 'Flex')}>
 <Button

@frimfram
Copy link
Contributor

@cwoolum I thought we said that there would be no hard coded "items" (data for collection), so why would it come from properties?

@cwoolum
Copy link
Contributor Author

cwoolum commented Sep 22, 2021

What I meant was that codegen will never hardcode an array of data. items can be passed in by a user though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants