Invalid hook call in renderCustomHeader

[potapovnikita]

Before you start - checklist

• I followed instructions in documentation written for my React-Calendar version
• I have checked if this bug is not already reported

Description

Invalid hook call in renderCustomHeader prop.

When I'm passing ReactComponent (with own useState hook inside) in renderCustomHeader prop, i'm getting error Invalid hook call......

Example:

<DatePicker
          renderCustomHeader={DatePickerHeader}
          selected={value}
          onChange={(date) => setValue(date)}
          inline
          locale={LOCALE}
/>

where DatePickerHeader is React Component:

const DatePickerHeader: FC<ReactDatePickerCustomHeaderProps> = () => {
  const [someState, setSomeState] = useState(false);
  return (
    <div>Some Header</div>  
  );
}

Steps to reproduce

1. Create React Component with inner state (useState) and pass it in renderCustomHeader (as in bug description).
2. See error in console.

Expected behavior

Should working without error Invalid hook call

Actual behavior

There is error in console Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: ......

Additional information

No response

Environment

• Browser (if applicable): Google Chrome 106.0.5249.119
• React-Calendar version: 4.8.0
• React version: 18.2.0

[talatkuyuk]

The same issue I have.

Could you make it possible to provide custom header as a normal JSX component like the same way with Custom Input. Then maybe the internal hooks work in the custom header component.

<DatePicker
  // the rest props are omitted
  renderCustomHeader={<DatePickerHeader />}
/>

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[talatkuyuk]

Still same issue.

[anmatika]

Extending @talatkuyuk's answer

This works for me when the props are passed.
Now hook usage is possible in the header component.

<DatePicker
  // the rest props are omitted
   renderCustomHeader={(p) => <DatePickerHeader {...p} />}
/>

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[github-actions]

This issue was closed because it has been stalled for 10 days with no activity.

[Marcel-Konjata]

should be reopen, this lib causes issues in older versions

[talatkuyuk]

Extending @anmatika answer.

renderCustomHeader={(p) => <DatePickerHeader {...p} />} may cause custom header re-created in every render. My solution is:

  const renderCustomHeader = useCallback(
    (headerProps: ReactDatePickerCustomHeaderProps) => (
      <CustomHeader {...headerProps}  />
    ),
    [],
  );

then use it as renderCustomHeader={renderCustomHeader}. In this way CustomHeader can have hooks inside.