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?