I get Parsing error: ':' expected.eslint in this code but can't see where

Question

I learn React and now I'm completely stuck on this ridiculous error.

Here's an image and down below the code, what am I doing wrong?

import React from 'react';
import { useNavigate } from 'react-router-dom';
import AuthUserContext from './context';

const WithAuthorization = condition => Component => {
    class withAuthorization extends React.Component {
        constructor() {
            super();
            this.navigateAway = this.navigateAway.bind(this);
        }

        navigateAway() {
            const navigate = useNavigate();
            navigate('/');
        }

        render() {
            return (
                <AuthUserContext.Consumer>
                    {authUser => (condition(authUser) ? <Component {...this.props} /> : { this.navigateAway })};
                </AuthUserContext.Consumer>
            );
        }
    }

    return withAuthorization;
};

export default WithAuthorization;

Update

Thanks to @antoineso answer I removed the {} braces and then it stopped complaining but I then get an ever stranger error:

score 1 · Accepted Answer · answered Dec 15 '20 at 16:14

1

Remove the curly brackets like this:

  {authUser => (condition(authUser) ? <Component {...this.props} /> :  this.navigateAway )};

For React you passing an object that's why it asked you to add : between this and navigateAway

answered Dec 15 '20 at 16:14

antoineso

2,063
1
5
13

Thanks I tried that to and got [this](https://snipboard.io/Y13mId.jpg) even stranger error and I checked the Eslint docs for this but at my level it dose not make sense I use a React.Component – Kid Dec 15 '20 at 16:18
@Kid I think that is because you using an Hooks ```useNavigate()``` – antoineso Dec 15 '20 at 16:25
I tried with just a console.log('test') inside the navigateAway() and the error is still there – Kid Dec 15 '20 at 16:27
ok will restart my environment maybe best – Kid Dec 15 '20 at 16:27
see this [StackOverFlow answer](https://stackoverflow.com/a/53371460/14522591) may be this can help you – antoineso Dec 15 '20 at 16:32
Hmmm Thanks @antoineso I remove all ref's to hooks and it still persist the same [error](https://snipboard.io/YW06XK.jpg) like a Ghost in the machine – Kid Dec 15 '20 at 18:13
Created a [new question](https://stackoverflow.com/questions/65311579/beginner-question-struggling-with-react-component-implementation-getting-strange) about this – Kid Dec 15 '20 at 18:25

I get Parsing error: ':' expected.eslint in this code but can't see where

Update

1 Answers1