# Lesson 1 - Pulling Book Data from a Different Data File

## Creating Book Component and Pulling Book Data from data.js

### Step-by-Step Procedure to Create the React Components and Use `booksData`

***

### **Final Project Structure**

```java
components
  ├── Book.jsx
  ├── data.js
App.jsx
index.js
```

**1. Create the File Structure**

1. Inside the `components` folder, ensure you have the following files:
   * `Book.jsx` for the child component.
   * `data.js` (already provided).
2. Inside src folder
   * `App.jsx` for the parent component.

<details>

<summary>data.js</summary>

```javascript
// data.js
/** @format */

const booksData = {
  items: [
    {
      volume: {
        title: "Effective Java",
        subtitle: "Programming Language Guide",
        authors: ["Joshua Bloch"],
        description:
          "From the source of Java's design, this guide provides the best practices and expert insights for professional Java developers. Ideal for enhancing coding efficiency and understanding Java's capabilities.",
        image:
          "http://books.google.com/books/content?id=ka2VUBqHiWkC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api",
      },
    },
    {
      volume: {
        title: "Clean Code",
        subtitle: "A Handbook of Agile Software Craftsmanship",
        authors: ["Robert C. Martin"],
        description:
          "A must-read for developers striving to write clean code that enhances readability and maintainability. Includes practical advice and real-world examples from software engineering.",
        image:
          "http://books.google.com/books/content?id=_i6bDeoCQzsC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api",
      },
    },
    {
      volume: {
        title: "Head First Java",
        subtitle: "A Brain-Friendly Guide",
        authors: ["Kathy Sierra", "Bert Bates"],
        description:
          "An engaging, visually-rich approach to learning Java, suitable for beginners who want a complete understanding of object-oriented programming and Java basics.",
        image:
          "http://books.google.com/books/content?id=lXEBwv0LYogC&printsec=frontcover&img=1&zoom=5&source=gbs_api",
      },
    },
    {
      volume: {
        title: "Eloquent JavaScript, 3rd Edition",
        subtitle: "A Modern Introduction to Programming",
        authors: ["Marijn Haverbeke"],
        description:
          "Completely revised and updated, this best-selling introduction to programming in JavaScript focuses on writing real applications.",
        image:
          "http://books.google.com/books/content?id=FSVTDwAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api",
      },
    },
    {
      volume: {
        title: "Professional Java for Web Applications",
        subtitle: "Comprehensive Guide to Spring Framework",
        authors: ["Nicholas S. Williams"],
        description:
          "The comprehensive Wrox guide for creating Java web applications for the enterprise This guide shows Java software developers and software engineers how to build complex web applications in an enterprise environment.",
        image:
          "http://books.google.com/books/content?id=cHr0AgAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api",
      },
    },
  ],
};
export default booksData;

```

</details>

***

**2. Create the `Book.jsx` Child Component**

In `BookList.jsx`, define the functional component with props and state management:

```dot
// Some code
BookList (Component)
├── div (HTML element - className="card mb-3", style={...})
│   ├── div (HTML element - className="row g-0")
│   │   ├── div (HTML element - className="col-md-4")
│   │   │   └── img (HTML element - src=image, className="img-fluid rounded-start", alt=title)
│   │   └── div (HTML element - className="col-md-8")
│   │       └── div (HTML element - className="card-body")
│   │           ├── h5 (HTML element - className="card-title", text=title)
│   │           ├── h6 (HTML element - className="card-subtitle mb-2 text-muted", text=subtitle)
│   │           ├── p (HTML element - className="card-text")
│   │           │   ├── strong (HTML element - text="Author:")
│   │           │   └── text=author
│   │           ├── p (HTML element - className="card-text", text=description)
│   │           └── button (HTML element - className=dynamic, onClick=toggleReadStatus, text=dynamic)
```

```jsx
import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

const BookList = ({ title, subtitle, author, description, image }) => {
  const [isRead, setIsRead] = useState(false);

  const toggleReadStatus = () => {
    setIsRead(!isRead);
  };

  return (
    <div className="card mb-3" style={{ maxWidth: "540px" }}>
      <div className="row g-0">
        <div className="col-md-4">
          <img src={image} className="img-fluid rounded-start" alt={title} />
        </div>
        <div className="col-md-8">
          <div className="card-body">
            <h5 className="card-title">{title}</h5>
            <h6 className="card-subtitle mb-2 text-muted">{subtitle}</h6>
            <p className="card-text"><strong>Author:</strong> {author}</p>
            <p className="card-text">{description}</p>
            <button
              className={`btn ${isRead ? "btn-success" : "btn-primary"}`}
              onClick={toggleReadStatus}
            >
              {isRead ? "Mark as Read" : "Mark as Unread"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default BookList;
```

***

**3. Import and Use `booksData` in `AppBookShelf.jsx`**

In `AppBookShelf.jsx`, pull the `booksData` from `data.js`, map over it, and render the `Book` components.

```graphql
// AppBookShelf.jsx layout
pp (Component)
├── div (className="container mt-4")
│   ├── h1 (className="mb-4", text="Book List")
│   └── div (className="row")
│       └── map (booksData.items.map(...))
│           ├── div (className="col-md-6", key="0")
│           │   └── Book (Component)
│           │       ├── ... (props: title, subtitle, author, description, image)
│           ├── div (className="col-md-6", key="1")
│           │   └── Book (Component)
│           │       ├── ... (props: title, subtitle, author, description, image)
│           ├── ... (more div/Book components based on booksData.items)
```

```jsx
import React from "react";
import Book from "./components/Book.jsx";
import booksData from "./components/data.js";
import "bootstrap/dist/css/bootstrap.min.css";

const App = () => {
  return (
    <div className="container mt-4">
      <h1 className="mb-4">Book List</h1>
      <div className="row">
        {booksData.items.map((book, index) => (
          <div className="col-md-6" key={index}>
            <BookList
              title={book.volume.title}
              subtitle={book.volume.subtitle}
              author={book.volume.authors.join(", ")}
              description={book.volume.description}
              image={book.volume.image}
            />
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;
```

***

**4. Install and Add Bootstrap Styling**

Install Bootstrap via npm if not already installed:

```bash
npm install bootstrap
```

Make sure to import Bootstrap CSS in `main.jsx` or globally:

```jsx
import "bootstrap/dist/css/bootstrap.min.css";
```

***

**5. Run the Application**

1. Start the development server:

   ```bash
   npm run dev
   ```
2. The application will display a styled book list where you can toggle the "read" status for each book.

***

***

This setup ensures a reusable `Book` component and a clean data flow from `data.js` to `App.jsx`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://reactjs.koida.tech/react-state-and-styling/lesson-1-pulling-book-data-from-a-different-data-file.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.