admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: avoid passing invalid to prop to DOM (#11931)

Browse Source 
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 <felix@twenty.com>
This commit is contained in:
Ajay A Adsule
2025-05-08 00:42:15 +05:30
committed by GitHub
parent e5888d11e2
commit c4482f6be6
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
View File

@ -1,12 +1,15 @@
import isPropValid from '@emotion/is-prop-valid';
import { useTheme } from '@emotion/react'; import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { isDefined } from 'twenty-shared/utils'; import { isDefined } from 'twenty-shared/utils';
import { CardContent } from 'twenty-ui/layout';
import { IconChevronRight, IconComponent } from 'twenty-ui/display'; 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; align-items: center;
cursor: ${({ onClick, to }) => (onClick || to ? 'pointer' : 'default')}; cursor: ${({ onClick, to }) => (onClick || to ? 'pointer' : 'default')};
display: flex; display: flex;