reactjsreact-proptypes

'children' is missing in props validation react/prop-types


I know this has been asked a few times but the current answers do not help me.

I am using auth0 to do some authentication work. I just intalled esLint and suddenly I am getting linting issues that I am unfamiliar with.

Right now this code:

import React from 'react'
import { useAuth0 } from '@auth0/auth0-react'

const isAuthenticated = () => {
  const { isAuthenticated } = useAuth0()
  return isAuthenticated
}

export function IfAuthenticated({ children }) {
  return isAuthenticated() ? <>{children}</> : null
}

export function IfNotAuthenticated({ children }) {
  return !isAuthenticated() ? <>{children}</> : null
}

Is getting this error:

src/components/Authenticated.jsx
  Line 9:35:   'children' is missing in props validation  react/prop-types
  Line 14:38:  'children' is missing in props validation  react/prop-types

I tried to import PropTypes but that doesn't seem to help (not sure if I was doing it right.)

Thanks for any help!


Solution

  • You have to declare the propTypes in function. Please check more details here

    import PropTypes from 'prop-types';
    
    export function IfAuthenticated({ children }) {
      IfAuthenticated.propTypes = {
          children: PropTypes.any
      };
    
      return isAuthenticated() ? <>{children}</> : null
    }
    
    export function IfNotAuthenticated({ children }) {
      IfNotAuthenticated.propTypes = {
          children: PropTypes.any
      };
    
      return !isAuthenticated() ? <>{children}</> : null
    }