CODEWITHSUNDEEP
reactjsnext.jseslint
Vitthal Kulkarni
Vitthal Kulkarni

Reputation: 85

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

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.

Upvotes: 0

Views: 1617

Answers (1)

juliomalves
juliomalves

Reputation: 50358

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} />);
    }
);

Upvotes: 2

Related Questions