Basic React app is failing to compile - Parsing error

Viewed 49

In the midst of this virus, I've been working through a full-stack development course that uses React. For one of the early assignments, I'm running into a parsing error that I don't quite understand. The error is "Parsing error: Unexpected token" pointing to:

const App = () => {
    const course = '...'
    ^

    const part1 = '...'
    const exercises1 = 1
    const part2 = '...'
    const exercises2 = 1
    const part3 = '...'
    const exercises3 = 1

    return (
        <div>
            <Header course={course} />
            <Content title1={part1} exercises1={exercises1} title2={part2} exercises2={exercises2} title3={part3} exercises3={exercises3} />
            <Total ex1={exercises1} ex2={exercises2} ex3={exercises3} />
        </div>
    )
}

Edit: added the rest of the body

For those who asked, here is the rest of the body:

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

const Header = (props) => {
    return (
        <>
            <h1>{props.course}</h1>
        </>
    )
}

const Part = (props) => {
    return (
        <>
            <p>
                {props.title} {props.exercises}
            </p>
        </>
    )
}

const Content = (props) => {
    return (
        <>
            <Part title={props.title1} exercises={props.exercises1} />
            <Part title={props.title2} exercises={props.exercises2} />
            <Part title={props.title3} exercises={props.exercises3} />
        </>
    )
}

const Total = (props) => {
    const exercises = props.ex1 + props.ex2 + props.ex3
    return (
        <>
            <p>Number of exercises {exercises}</p>
        <>
    )
}

const App = () => {
    const course = 'Half Stack application development'
    const part1 = 'Fundamentals of React'
    const exercises1 = 10
    const part2 = 'Using props to pass data'
    const exercises2 = 7
    const part3 = 'State of a component'
    const exercises3 = 14

    return (
        <div>
            <Header course={course} />
            <Content title1={part1} exercises1={exercises1} title2={part2} exercises2={exercises2} title3={part3} exercises3={exercises3} />
            <Total ex1={exercises1} ex2={exercises2} ex3={exercises3} />
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('root'))

All that is provided through the error is "Line 42:5: Parsing error: Unexpected token"

1 Answers

The issue is line 37. You didn't close the fragment correctly:

const Total = (props) => {
  const exercises = props.ex1 + props.ex2 + props.ex3;
  return (
    <>
      <p>Number of exercises {exercises}</p>
    </>
  );
};
Related