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.
do you know?
how many words do you know