From c4482f6be69ccf6f7d268d7932527cda31300901 Mon Sep 17 00:00:00 2001 From: Ajay A Adsule <103304466+AjayAdsule@users.noreply.github.com> Date: Thu, 8 May 2025 00:42:15 +0530 Subject: [PATCH] fix: avoid passing invalid to prop to DOM (#11931) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed a React warning caused by the to prop being passed to the DOM when its value was undefined or false. Since to is not a valid HTML attribute, this triggered a console error. The prop is only used for styling logic, so I used Emotion’s shouldForwardProp to prevent it from being passed to the DOM, resolving the issue cleanly. ![Screenshot 2025-05-07 at 10 00 54 PM](https://github.com/user-attachments/assets/0660af7f-df98-46a3-b9f2-2ccc993ac227) #11850 --------- Co-authored-by: Félix Malfait --- .../settings/components/SettingsListItemCardContent.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx index 641e45f2e..c4d46ef57 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx @@ -1,12 +1,15 @@ +import isPropValid from '@emotion/is-prop-valid'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { ReactNode } from 'react'; import { Link } from 'react-router-dom'; import { isDefined } from 'twenty-shared/utils'; -import { CardContent } from 'twenty-ui/layout'; import { IconChevronRight, IconComponent } from 'twenty-ui/display'; +import { CardContent } from 'twenty-ui/layout'; -const StyledRow = styled(CardContent)<{ to?: boolean }>` +const StyledRow = styled(CardContent, { + shouldForwardProp: (prop) => prop !== 'to' && isPropValid(prop), +})<{ to?: boolean }>` align-items: center; cursor: ${({ onClick, to }) => (onClick || to ? 'pointer' : 'default')}; display: flex;