Unexpected token error in React Component

Question

I have the following JS code here:

// index.js file
import React from "react";
import ReactDOM from "react-dom";
import logo from "./repo/clubServer/public/firstimage.png";
import events from "./eventData.json";
import Menu from "./menu"; // my new menu component in menu.js

let logoImage = <img src={logo} />;

let contents = <Menu />; 

ReactDOM.render(contents, document.getElementById("root"));

The code is in the same folder as this menu component called menu.js which Menu in the index.js code is imported from.

import React from 'react';
import ReactDOM from 'react-dom';

// Function Component Definition
function Welcome(props) { // Start with Capital
    //return <h1> Hello, {props.name} </h1>; //returns JSX
    return <a href={props.site}> {props.name} </a>;
}
// Function component use -- looks like custom HTML
let contents = <nav>
        <Welcome site='./index.html', name="Home Page" />
        <Welcome site='./login.html', name="Login" />
        <Welcome site='./activities.html', name="Activities" />
        <Welcome site='./signup.html', name="Signup" />
        </nav>;

ReactDOM.render(contents,
    document.getElementById('root')
);

The index.js file is also supposed to make this HTML file appear on the browser under the localhost, and the menu from menu.js is also supposed to appear on the HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <!-- <link rel="stylesheet" href="index.css" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>react</title>
</head>
<body>
    <div id="root"></div>
    <script src="index.js"></script>
</body>
</html>

However, when I try to run index.js via parcel, I get this error:

\menu.js:11:36: Unexpected token (11:36)
   9 | // Function component use -- looks like custom HTML
  10 | let contents = <nav>
> 11 |         <Welcome site='./index.html', name="Home Page" />
     |                                    ^
  12 |          <Welcome site='./login.html', name="Login" />
  13 |          <Welcome site='./activities.html', name="Activities" />
  14 |          <Welcome site='./signup.html', name="Signup" />

I am a beginner on ReactJS components and I would appreciate it if someone would guide me through this and help me avoid this error.

Answer 1

You should just remove the coma present in each Welcome declaration:

let contents = <nav>
        <Welcome site='./index.html' name="Home Page" />
        <Welcome site='./login.html' name="Login" />
        <Welcome site='./activities.html' name="Activities" />
        <Welcome site='./signup.html' name="Signup" />
    </nav>;

Having comas in JSX code is not a valid syntax.

Unexpected token error in React Component

Question

1 answers

solution1
0 ACCPTED 2021-04-28 09:17:41

Unexpected token error in React Component

Question

1 answers

solution1 0 ACCPTED 2021-04-28 09:17:41

solution1
0 ACCPTED 2021-04-28 09:17:41