I’m trying to create a time slider in my react
app and I can’t beat this error below that keeps showing up in my browser console.
bundle.js:21658 Warning: Encountered two children with the same key, `thumb-
undefined`. 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.
I’m new to react and below is my code – any idea why this is happening?
<Card className="mb-3 border-0 shadow-sm">
<Card.Body>
<Form.Label className="fw-medium pb-2">Time Range</Form.Label>
<div className="px-2">
<Range
values={timeRange}
step={1}
min={6}
max={21}
onChange={(values) => setTimeRange(values)}
renderTrack={({ props, children }) => {
const { key, ...restProps } = props;
return (
<div
key={`track-${restProps['aria-valuemin']}-${restProps['aria-valuemax']}`}
{...restProps}
style={{
...restProps.style,
height: '6px',
width: '100%',
backgroundColor: '#ddd'
}}
>
{children}
</div>
);
}}
renderThumb={({ props, isDragged }, idx) => {
const { key, ...restProps } = props;
return (
<div
key={`thumb-${idx}`}
{...restProps}
style={{
...restProps.style,
height: '24px',
width: '24px',
borderRadius: '50%',
backgroundColor: 'var(--primary-color)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<div
style={{
height: '16px',
width: '5px',
backgroundColor: isDragged ? 'var(--primary-color)' : '#CCC'
}}
/>
</div>
);
}}
/>
</div>
<div className="d-flex justify-content-between mt-2">
<span>{`${timeRange[0] > 12 ? timeRange[0] - 12 : timeRange[0]}:00 ${timeRange[0] >= 12 ? 'PM' : 'AM'}`}</span>
<span>{`${timeRange[1] > 12 ? timeRange[1] - 12 : timeRange[1]}:00 ${timeRange[1] >= 12 ? 'PM' : 'AM'}`}</span>
</div>
</Card.Body>
</Card>
I’ve tweaked the key…props several times and still can’t get it to work. There are several questions on SO that have similar answers but my inexperience is struggling to map those answers to my code snippet. Any help would be appreciated.