This document covers the preferred method for removing defaultProps (deprecated with React v19) from frontend components, to eliminate the numerous console errors re: deprecation warning.

Many defaultProps in components are unnecessary and only supply sample data values for Storybook.
This isn’t always true, so each component has to be evaluated.

Method 1: Delete the defaultProps Section

Easiest method, works for most components.

Use this method when:

• defaultProps supply sample/stub data or values that are not necessary or have no impact on the component implementation.
• All defaultProps are empty.
• The component is not implemented anywhere in the project. There should only be a few of these, but they do exist.

Steps:

1. Delete the entire defaultProps section without any other modification to the component.

Examples:

sampleTagComponent component at src/components/sampleTagComponent.jsx

• Empty href values
• Stub text

sampleTagComponent.defaultProps = { tagCategories: [ { href: '', value: 'Tag 1', }, { href: '', value: 'Longer Tag 2', }, { href: '', value: 'A very long Tag 3', }, ], }

sampleCardComponent component at src/components/sampleCardComponent.jsx

• Various empty data values
• Langcode set to ‘en’ would be overridden by pageContext/translation logic
• Only implemented in one place in the project, and all values are supplied in the implementation

sampleCardComponent.defaultProps = { resultCardCode: '', allTrips: { image: '', title: '', distanceAndTime: '', totalDuration: '1' + '-' + '2', destination: { start: '', end: '', }, tripDesc: '', urlLink: '', stops: [], langcode: 'en', }, }

sampleCTAComponent component at src/components/sampleCTAComponent.jsx

• Empty background value
• Hue is already set to ‘light’ in the component logic when an alternate value isn’t supplied
• StyleClass is already set to ‘default’ in the component logic when an alternate value isn’t supplied
• CloseIcon would always be false unless it’s explicitly added

sampleCTAComponent.defaultProps = { background: '', hue: 'light', styleClass: 'default', closeIcon: false, }

Method 2: Delete the defaultProps Section and Update Instances of the Component

Use this method when:

• defaultProps supply settings that some component implementations rely upon.
• There are only a few instances of the component in the project

Steps:

1. Delete the entire defaultProps section without any other modification to the component.
2. Locate and update instances of the component that need these settings.

Examples:

sampleVideoPlayerComponent at src/components/sampleVideoPlayerComponent.jsx

• Component is implemented 6 times
• All implementations rely on the default datafy prop
• Some implementations rely on the default controls, playing, loop and muted props.

sampleVideoPlayerComponent.defaultProps = { url: '', light: false, width: '100%', height: '100%', title: '', controls: true, playing: false, loop: false, muted: false, datafy: 'datafy-event-youtube-video-click', autoload: false, } Add the props in the implementation:

`{allNativeVideos.map((video, index) => ( <sampleVideoPlayerComponent key={video.name} url={video.field_media_oembed_video} width={isMobile ? ‘325px’ : ‘582px’} height={isMobile ? ‘182px’ : ‘327px’} title={video.name}

---

ADD PROPS HERE FOR datafy, controls, playing, loop, muted

---

/> ))}`

Method 3: Use Javascript Parameters

Use this method when:

• defaultProps supply settings that all or most component implementations rely upon.
• There are many instances of the component in the project

Steps:

1. Delete the entire defaultProps section.
2. Refactor the component.

When refactoring the component, the only props that should be added as parameters are those that supply necessary values. defaultProps with empty values, no-op functions, empty arrays or stub data do NOT need to be added as parameters.

Examples:

sampleCardGroupComponent component at src/components/sampleCardGroupComponent.jsx

• No empty values
• Component is only implemented 6 times, but all 6 implementations use these settings

sampleCardGroupComponent.defaultProps = { breakpointColumnsObj: { default: 3, 948: 2, 500: 1, }, } Original component:

`const sampleCardGroupComponent = (props) => { return ( <Masonry breakpointCols={props.breakpointColumnsObj} className=”m-sampleCardGroupComponent” columnClassName=”m-sampleCardGroupComponent__col”

{props.children} </Masonry> ) }` Becomes:

`const sampleCardGroupComponent = ({ breakpointColumnsObj = { default: 3, 948: 2, 500: 1 }, children, }) => { return ( <Masonry breakpointCols={breakpointColumnsObj} className=”m-sampleCardGroupComponent” columnClassName=”m-sampleCardGroupComponent__col”

{children} </Masonry> ) }`