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

Question

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!

Answer 1

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
}