1

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!

vygrdev
  • 195
  • 1
  • 12

1 Answers1

4

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
}
Steve Gerrad
  • 354
  • 1
  • 8
  • thank you this worked - however I don't fully understand what PropTypes are - and the linked response doesn't make it clearer for me (I am new). – vygrdev Aug 23 '22 at 07:53
  • This article was helpful for me to understand what PropTypes are. https://www.geeksforgeeks.org/reactjs-proptypes/ – Steve Gerrad Aug 23 '22 at 08:04