A props object containing a "key" prop is being spread into JSX:

[drokbers]

My Code:

const CustomRange: React.FC<CustomRangeProps> = ({
  value,
  step,
  min,
  max,
  onChange,
}) => {
  return (
    <Range
      values={value}
      step={step}
      min={min}
      max={max}
      onChange={onChange}
      renderTrack={({ props, children }) => (
        <div
          onMouseDown={props.onMouseDown}
          onTouchStart={props.onTouchStart}
          className="w-full h-7 flex group"
          style={props.style}
        >
          <div
            ref={props.ref}
            className="h-1 w-full rounded-md self-center"
            style={{
              background: getTrackBackground({
                values: value,
                colors: ["#ffff", "#0c0a09"],
                min,
                max,
              }),
            }}
          >
            {children}
          </div>
        </div>
      )}
      renderThumb={({ props, isDragged }) => (
        <div
          {...props}
          className={`h-3 w-3 rounded-full bg-white ${
            !isDragged ? "opacity-0" : ""
          } group-hover:opacity-100`}
          style={{
            ...props.style,

            boxShadow: "0px 2px 6px #AAA",
          }}
        ></div>
      )}
    />
  );

Error:

First of all, I checked if there is a key in the props object and if there is, I thought of defining it separately as follows :

  values={value}
  step={step}
  min={min}
  max={max}
  onChange={onChange}
  renderTrack={({ props, children }) => (

    <div
      onMouseDown={props.onMouseDown}
      onTouchStart={props.onTouchStart}
      className="w-full h-7 flex group"
      style={props.style}
    >

      <div
        ref={props.ref}
        className="h-1 w-full rounded-md self-center"
        style={{
          background: getTrackBackground({
            values: value,
            colors: ["#ffff", "#0c0a09"],
            min,
            max,
          }),
        }}
      >
        {children}
      </div>
    </div>
  )}

  renderThumb={({ props, isDragged }) => (
    <div
      {...props}
      className={`h-3 w-3 rounded-full bg-white ${
        !isDragged ? "opacity-0" : ""
      } group-hover:opacity-100`}
      style={{
        ...props.style,

        boxShadow: "0px 2px 6px #AAA",
      }}
    ></div>
  )}
/>`

Then it gave an error "message": "Property 'key' does not exist on type 'ITrackProps'.", so renderTrack and renderThumb callbacks do not have a property named key.

How can I solve this problem?

[ljk1291]

@drokbers Im having a similar issue after switching to app router on nextjs, did you manage to find a solution?

[drokbers]

@drokbers Im having a similar issue after switching to app router on nextjs, did you manage to find a solution?

I couldn't solve the error, but when I deploy it to Vercel, it's not giving an error. It only gives an error when I'm working locally.

[sirldev]

You just pass key={props.key} at renderThumb

eg

renderThumb={({ props, isDragged }) => (
    <div
      {...props}
     key={props.key}
      className={`h-3 w-3 rounded-full bg-white ${
        !isDragged ? "opacity-0" : ""
      } group-hover:opacity-100`}
      style={{
        ...props.style,

        boxShadow: "0px 2px 6px #AAA",
      }}
    ></div>
  )}

[tajo]

Example updated.