How to resolve Parsing Error: Missing semicolon?

I'm new to React and I'm trying to learn by building a book list web application.

When saving my code I'm getting the following in localhost:

Compiled with problems: ERROR src/Components/BookList.js Line 2:5: Parsing error: Missing semicolon. (2:5)

There is the BookList.js File:

import React from "react";
import Book from "./Book";
import "./BookList.css";
import { BookContext } from "../context/BookContext";
import { ThemeContext } from "../context/ThemeContext";

export default class BookList extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {(contextTheme) => (
          <BookContext.Consumer>
            {(contextBook) => {
              const { books } = contextBook;

              const { changeColorTheme, isDarkMode, dark, light} = contextTheme;

              const theme = isDarkMode ? dark : light;

              return (
                <section className="page-section" style={{ backgroundColor: theme.bg, color: theme.color }} id="portfolio">
                  <div className="container">
                    <div className="text-right"><button className="btn btn-danger" onClick={changeColorTheme}>Change Mood</button></div>
                    <div className="text-center"><h2 className="section-heading text-uppercase">My Book Folio</h2><h3 className="section-subheading text-muted">subheading</h3></div>
                    <div className="row">
                      {books.map((book, index) => {
                        return <Book book={book} key={index} />;
                      })}
                    </div>
                  </div>
                </section>
              );
            }}
          </BookContext.Consumer>
        )}
      </ThemeContext.Consumer>
    );
  }
}

I've looked through the code and I can't see the missing colon. My only other thought is that there's some other syntax error I haven't noticed.

Does anyone have any idea or any recommendations on how to debug this?

1 answer

  • answered 2022-05-04 11:04 Fury

    I rewrote the code in the return statement and the web application worked. I've tried to compare the code, however, I can't see where the original issue was.

    Here is an image of the working code

    If you figure it out please let me know. As I would love to know what the cause was.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum