Error: Component definition is missing display name react/display-name with React.forwardRef

user_12178360 0
Viewed 350

I have defined a checkbox like below:

export const IndeterminateCheckbox = forwardRef(
    ({ indeterminate, ...rest }, ref) => {
      const defaultRef = useRef()
      const resolvedRef = ref || defaultRef
  
      useEffect(() => {
        resolvedRef.current.indeterminate = indeterminate
      }, [resolvedRef, indeterminate])
  
      return (<input type="checkbox" ref={resolvedRef} {...rest} />);
    }
);

For which I am getting above lint error. I searched for multiple places but could not find how better I can define the IndeterminateCheckbox to avoid that error.

eslint next.js reactjs
1 Answers

Short of disabling the react/display-name lint rule (globally or for this line specifically), you can simply pass a named function (rather than an anonymous one) to the forwardRef call.

export const IndeterminateCheckbox = forwardRef(
    function Checkbox({ indeterminate, ...rest }, ref) {
        const defaultRef = useRef()
        const resolvedRef = ref || defaultRef
  
        useEffect(() => {
            resolvedRef.current.indeterminate = indeterminate
        }, [resolvedRef, indeterminate])
  
        return (<input type="checkbox" ref={resolvedRef} {...rest} />);
    }
);
user_18707800
Related