Fix - Removed defaultProps from Function Components for React 18.3.

[shyk001]

As of react 18.3, a warning will be displayed when using defaultProps inside a function component. Therefore, I have removed the defaultProps used in the function component.

Fix #4477

[pullrequest]

✅ This pull request was sent to the PullRequest network.

---

@shyk001 you can click here to see the review status or cancel the code review job.

[pullrequest]

PullRequest Breakdown

Reviewable lines of change

+ 12
- 11

100% JavaScript

Type of change

Fix - These changes are likely to be fixing a bug or issue.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (7344120) 95.39% compared to head (8839334) 95.39%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4498   +/-   ##
=======================================
  Coverage   95.39%   95.39%           
=======================================
  Files          29       29           
  Lines        2518     2521    +3     
  Branches     1018     1021    +3     
=======================================
+ Hits         2402     2405    +3     
  Misses        116      116           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[pullrequest]

this change looks good to me and matching the description regarding addressing the defaultProps usage

Xiaoyong W

---

Reviewed with ❤️ by PullRequest

[reinrl]

@shyk001 Is the extra typeof check in the line hidePopper: typeof props.hidePopper === "boolean" ? props.hidePopper : true because otherwise you couldn't ever set hidePopper to false? Why not just use nullish coalescing (e.g., hidePopper: props.hidePopper ?? true - which you could use for all three default prop comparisons), or just create a default props object within the component body and then layer the incoming props in on top of that?

const defaultProps = {
  popperModifiers: [],
  popperProps: {},
  hidePopper: true,
};
const alt_props = {
  ...defaultProps,
  ...props,
};

[shyk001]

@reinrl
I think it would have been good code to use nullish coalescing like you said, I missed it. Thanks for the advice.

For the second method, I don't think it will work as you intended because the props will overwrite the default_props.

const props = {
    a: "1qe",
    b: "asdf",
    c: undefined,
    d: {a: "gkgk"},
    e: undefined
}

const default_props = {
    c: [],
    d: {},
    e: true,
}

const alt_props = {
    ...default_props,
    ...props
}

# alt_props console log result
# { c: undefined, d: { a: 'gkgk' }, e: undefined, a: '1qe', b: 'asdf' }

[reinrl]

@shyk001 good catch - explicitly passing in undefined for any of the props was an edge case that I hadn't considered. Just took me longer than I care to admit to figure out the "why" behind the Boolean type check in your change...and then once I figured it out, I started thinking through other alternatives I have used elsewhere (and your point is a good one that is going to make me revisit some past code elsewhere).