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!
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
}