Soy nuevo en React y estoy tratando de aprender creando una aplicación web de lista de libros.

Al guardar mi código obtengo lo siguiente en localhost:

Compilado con problemas: ERROR src/Components/BookList.js Línea 2:5: Error de análisis: Falta el punto y coma. (2:5)

Existe el archivo BookList.js:

 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> ); } }

Revisé el código y no puedo ver los dos puntos que faltan. Mi único otro pensamiento es que hay algún otro error de sintaxis que no he notado.

¿Alguien tiene alguna idea o alguna recomendación sobre cómo depurar esto?