I'm using a pretty strict version of TS and ESLint.
I ripped this portal from the docs here: https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/portals/
I modified the code to the below:
import React, { useEffect, useRef, ReactNode } from 'react'
import { createPortal } from 'react-dom'
interface Props {
children?: ReactNode
portalId: string
}
export const Portal: React.FC<Props> = ({ children, portalId }) => {
const el = useRef(document.createElement('div'))
useEffect(() => {
const portalRoot = document.querySelector(`#${portalId}`) as HTMLElement
const current = el.current
portalRoot.appendChild(current)
return () => void portalRoot?.removeChild(current) // error thrown here?
}, [portalId])
return createPortal(children, el.current)
}
Error below:
Expected 'undefined' and instead saw 'void'
When I remove the void (can't use undefined, otherwise rest of code is unreachable), as such:
import React, { useEffect, useRef, ReactNode } from 'react'
import { createPortal } from 'react-dom'
interface Props {
children?: ReactNode
portalId: string
}
export const Portal: React.FC<Props> = ({ children, portalId }) => {
const el = useRef(document.createElement('div'))
useEffect(() => {
const portalRoot = document.querySelector(`#${portalId}`) as HTMLElement
const current = el.current
portalRoot.appendChild(current)
return () => portalRoot?.removeChild(current) // how to fix?
}, [portalId])
return createPortal(children, el.current)
}
This results in another error:
Argument of type '() => () => HTMLDivElement' is not assignable to parameter of type 'EffectCallback'.
Type '() => HTMLDivElement' is not assignable to type 'void | Destructor'.
Type '() => HTMLDivElement' is not assignable to type 'Destructor'.
Type 'HTMLDivElement' is not assignable to type 'void | { [UNDEFINED_VOID_ONLY]: never; }'
How to fix?