Fixed Dock Component using ReactElement for NextJS

[Yaseen-Ejaz]

What the old code did

{Children.map(children, (child) =>
  cloneElement(child as React.ReactElement, { width, isHovered })
)}

The code assumes every child is a valid React element and can accept the width and isHovered props.
If a child is not a valid React element or does not support width or isHovered, it could result in runtime errors.
TypeScript flags the call to cloneElement because it doesn't know whether width or isHovered are valid props for the given child. This weakens type safety.

What the updated code does

{Children.map(children, (child) =>
  React.isValidElement(child)
    ? cloneElement(
        child as React.ReactElement<{ width: MotionValue<number>; isHovered: MotionValue<number> }>, 
        { width, isHovered }
      )
    : child
)}

Validates the child at runtime:

Uses React.isValidElement(child) to check if the child is a valid React element before attempting to clone it.
If the child is not a React element (e.g., a string or number), it bypasses cloning and returns the child as-is, preventing runtime errors.

Explicitly defines the expected props for cloning:

• Casts child as a React.ReactElement<{ width: MotionValue<number>; isHovered: MotionValue<number> }>.
• This tells TypeScript that the child must support width and isHovered props.
• Resolves the TypeScript error by aligning the cloneElement props with the child’s expected type.

Improves robustness and maintainability:

• Prevents accidental runtime errors by ensuring only valid React elements are cloned.
• Makes the function self-documenting—future contributors can clearly see that width and isHovered are being passed to valid React elements.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
motion-primitives	❌ Failed (Inspect)			Jan 2, 2025 2:52am

[ibelick]

isValidElement here, and update React.isValidElement to isValidElement below