appbaseio / reactivesearch

Search UI components for React and Vue
https://opensource.appbase.io/reactivesearch
Apache License 2.0
4.9k stars 466 forks source link

Optionally separate keys from labels in RatingsFilter #266

Closed davidklebanoff closed 6 years ago

davidklebanoff commented 6 years ago

Issue Type: bug & enhancement

Description: When trying to create the same search/filter experience as Amazon.com, I set the labels to each rating filter to be & up. Since the label is also used as the key, an error occur. To avoid this, an optional additional attribute could be added named key which sets the key for each label. If no key is supplied, it could fallback to the label provided.

Screenshots:

A screenshot from Amazon.com's rating filter image

Minimal reproduction of the problem with instructions:

Current:

<RatingsFilter
  componentId="ratingsSensor"
  dataField="ratings"
  data={[
    {"start": 4, "end": 5, "label": "& up"},
    {"start": 3, "end": 5, "label": "& up"},
    {"start": 2, "end": 5, "label": "& up"},
    {"start": 1, "end": 5, "label": "& up"}
  ]}
/>

Fixed (added optional key):

<RatingsFilter
  componentId="ratingsSensor"
  dataField="ratings"
  data={[
    {"start": 4, "end": 5, "label": "& up", key: "4"},
    {"start": 3, "end": 5, "label": "& up", key: "3"},
    {"start": 2, "end": 5, "label": "& up", key: "2"},
    {"start": 1, "end": 5, "label": "& up", key: "1"}
  ]}
/>

Reactivesearch version: 2.2.1

Anything else:

Javascript console error:

warning.js?6327:33 Warning: Encountered two children with the same key, `& up`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    in ul (created by RatingsFilter)
    in div (created by RatingsFilter)
    in RatingsFilter (created by Connect(RatingsFilter))
    in Connect(RatingsFilter) (created by App)
    in div (created by App)
    in div (created by App)
    in div (created by App)
    in div (created by App)
    in div (created by Styled(div))
    in Styled(div) (created by URLParamsProvider)
    in URLParamsProvider (created by Connect(URLParamsProvider))
    in Connect(URLParamsProvider) (created by ReactiveBase)
    in Provider (created by ReactiveBase)
    in ThemeProvider (created by ReactiveBase)
    in ReactiveBase (created by App)
    in App
divyanshu013 commented 6 years ago

Thanks for contributing David, this will be available in the next release v2.3.0 🍺