I have just started learning react and have stumbled into a problem. I am completely confused at this point. I have an array of books and I am trying to iterate through them. There are two functional components that are used - BookList and Book. Books is an array and I have created a new var called as list which iterates the Books array using the .map() method.
I am getting an error like this: ReferenceError: Cannot access 'Book' before initialization Pls can someone guide me in the right direction .....
import React from "react"; import ReactDom from "react-dom"; import "./index.css"; let Books = [ { image: "https://m.media-amazon.com/images/I/51upMbxwYPL.jpg", title: "Charlie and the Chocolate Factory", author_name: "Roald Dahl", }, { image: "https://m.media-amazon.com/images/I/51H2M2jWmvL.jpg", title: "The Blue Umbrella", author_name: "Ruskin Bond", }, ]; const list = Books.map((book) => { return ( <Book image={book.image} title={book.title} author_name={book.author_name} /> ); }); const BookList = () => { return <section className="booklist">{list}</section>; }; const Book = (props) => { return ( <article className="book"> <img src={props.image} alt="" /> <h1>{props.title}</h1> <p style={{ color: "green", fontFamily: "monospace", fontSize: "25px" }}> {props.author_name} </p> </article> ); }; ReactDom.render(<BookList />, document.getElementById("root"));
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)