TanStack / ranger

🤖 Headless utilities for building range and multi-range sliders in React, Preact, Solid, Vue, Svelte and Angular
MIT License
753 stars 63 forks source link

Encountered two children with the same key, `0` #24

Closed thijssmudde closed 8 months ago

thijssmudde commented 3 years ago

While I only have 1 handle there is an internal issue with this package which says:

react_devtools_backend.js:2574 Warning: Encountered two children with the same key, 0. 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.

This happens with the most barebones version

  const [values, setValues] = React.useState([10]);

  const { getTrackProps, handles } = useRanger({
    min: 0,
    max: 100,
    stepSize: 1,
    values,
    // onChange: setValues,
    onDrag: setValues,
  });

// render
{handles.map(({ getHandleProps }) => (
            <React.Fragment key={getHandleProps().key}>
           // omitted
          </React.Fragment>
 ))}
rkulinski commented 9 months ago

What version of the package are you using?