I am fairly new to react, I’m building a website and I want to keep a page private if my user does not have sufficient scope to access it. I have the following code:

function ProtectedPage(props, children) {
    var [canAccess, setCanAccess] = useState(false);

    useEffect(() => {
        LoginManager.getStoredUser().then(user => {
            setCanAccess(user.scopes.includes(props.scope));
        });
    }, [props.scope]);

    return (...);
}

and

function Secret() {
    return (
        <ProtectedPage scope="owner">
            <PageHeader>Secret Page</PageHeader>
        </ProtectedPage>
    );
}

I keep getting the following error:Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead. Any help is appreciated, I’ve been trying to figure this out for hours and nothing makes sense anymore lol.

Thanks 🙂