CODEWITHSUNDEEP
javascriptreactjssyntax-errorreact-props
bilalsarimeseli
bilalsarimeseli

Reputation: 1

Syntax error: Unexpected token, expected "," in React Route Props

Hello Stackoverflow Community! Any help is profoundly appreciated. I have been struggling to figure this out for long time in such a way that my browser's entire history gives "Syntax error: Unexpected token, expected , ". I am adding the code here. I cannot find the words to truly express my appreciations.

import React, { useEffect, useState } from "react";
import { Route, Switch, withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { fetchUser } from "./store/utils/thunkCreators";
import Signup from "./Signup.js";
import Login from "./Login.js";
import { Home, SnackbarError } from "./components";

const Routes = (props) => {
const { user, fetchUser } = props;
const [errorMessage, setErrorMessage] = useState("");
const [snackBarOpen, setSnackBarOpen] = useState(false);

useEffect(() => {
 fetchUser();
}, [fetchUser]);

useEffect(() => {
 if (user.error) {
   // check to make sure error is what we expect, in case we get an unexpected server error object
   if (typeof user.error === "string") {
     setErrorMessage(user.error);
   } else {
     setErrorMessage("Internal Server Error. Please try again");
   }
   setSnackBarOpen(true);
 }
}, [user.error]);

if (props.user.isFetchingUser) {
 return <div>Loading...</div>;
}

return (
 <React.Fragment>
   {snackBarOpen && (
     <SnackbarError
       setSnackBarOpen={setSnackBarOpen}
       errorMessage={errorMessage}
       snackBarOpen={snackBarOpen}
     />
   )}
   <Switch>
     <Route path="/login" component={Login} />
     <Route path="/register" component={Signup} />
     <Route
       exact
       path="/"
       render={(props) => (props.user?.id? <Home /> : <Signup />)}
     />
     <Route path="/home" component={Home} />
   </Switch>
 </React.Fragment>
);
};

const mapStateToProps = (state) => {
return {
 user: state.user,
};
};

const mapDispatchToProps = (dispatch) => {
return {
 fetchUser() {
   dispatch(fetchUser());
 },
};
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Routes));

The error is as follows:

Failed to compile.

./src/routes.js Syntax error: Unexpected token, expected , (49:41)

exact
  48 |           path="/"
> 49 |           render={(props) => (props.user?.id? <Home /> : <Signup />)}
     |                                          ^
  50 |         />
  51 |         <Route path="/home" component={Home} />
  52 |       </Switch>

Upvotes: 0

Views: 1748

Answers (2)

Manish Jangir
Manish Jangir

Reputation: 5437

There may be two possibilities of this syntax error. One is what @arieljuod said that there should be a space. Another may be you are not having optional chaining setup in your babel config.

If you are using Create React App, then its most likely the space thing otherwise @babel/plugin-proposal-optional-chaining should be added in your babel config.

Upvotes: 0

arieljuod
arieljuod

Reputation: 15838

You are missing a white space between id and ? here: props.user?.id? <Home /> : <Signup />. It should be props.user?.id ? <Home /> : <Signup />.

Upvotes: 1

Related Questions