# Lesson 3 - Create NavBar.jsx Component

Step 1.  Create NavBar.jsx component inside src/components folder

```jsx
/*NavBar.jsx  -- before SearchBar component */ 
/** @format **/

function NavBar() {
  return (
    <>
      <nav className="navbar bg-body-tertiary">
        <div className="container-fluid">
          <a className="navbar-brand" href="#">
            <img
              className=" col-md-3 "
              src="../src/assets/react.svg"
              alt="BookShelf Logo"
              width="30"
              height="24"
            />
            Google Book Shelf
          </a>
        </div>
      </nav>
    </>
  )
}

export default NavBar
```

```graphql
// Layout Design of NavBar Component
NavBar Component
│
├── Props
│   ├── query (string) - Current search query
│   └── onSearch (function) - Callback for search submission
│
├── State
│   └── searchInput (useState) - Tracks input field value
│
├── Methods
│   └── handleSubmit() - Processes form submission
│
└── Render Structure
    └── <nav> (navbar)
        └── <div> (container)
            ├── <a> (navbar-brand) - "Google Bookshelf"
            │
            └── <form> (d-flex ms-auto)
                ├── <input> (form-control) - Search text field
                │   ├── value={searchInput}
                │   └── onChange handler
                │
                └── <button> (btn btn-outline-light) - "Search"

```

```jsx
// After Searbar Form
// Import necessary libraries
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css';

const NavBar = ({ query, onSearch }) => {
  const [searchInput, setSearchInput] = useState(query);

  // Handle the form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(searchInput.trim()); // Pass the input back to the parent
  };

  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
      <div className="container">
        {/* App Header Title */}
        <a className="navbar-brand" href="#">
          Google Bookshelf
        </a>

        {/* Search Form */}
        <form className="d-flex ms-auto" onSubmit={handleSubmit}>
          <input
            type="text"
            className="form-control me-2"
            placeholder="Search books..."
            value={searchInput}
            onChange={(e) => setSearchInput(e.target.value)}
          />
          <button className="btn btn-outline-light" type="submit">
            Search
          </button>
        </form>
      </div>
    </nav>
  );
};

// Define PropTypes for the component
NavBar.propTypes = {
  query: PropTypes.string.isRequired,
  onSearch: PropTypes.func.isRequired,
};

export default NavBar;

```

### Explanation of `NavBar.jsx` Code Structure

The `NavBar` component is responsible for displaying the application header and providing a search bar to handle user queries. Here's a step-by-step breakdown of its functionality:

***

#### **1. Importing Libraries**

```jsx
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css';
```

* **`React`**: Core library for building the component.
* **`useState`**: Manages the state of the search input.
* **`PropTypes`**: Validates the props passed to the component.
* **Bootstrap**: Adds styling for the navbar and form elements.

***

#### **2. Component Declaration**

```jsx
const NavBar = ({ query, onSearch }) => {
```

* **Props**:
  * `query`: The current search term to initialize the input field.
  * `onSearch`: A function to handle the search query submission and pass it back to the parent component.

***

#### **3. Local State for Search Input**

```jsx
const [searchInput, setSearchInput] = useState(query);
```

* **Purpose**:
  * Tracks the user’s input in the search bar.
  * Initializes with the value of `query` received as a prop.

***

#### **4. Handling Form Submission**

```jsx
const handleSubmit = (e) => {
  e.preventDefault(); // Prevents page reload
  onSearch(searchInput.trim()); // Triggers the parent function with trimmed input
};
```

* **Explanation**:
  * Prevents the default form submission behavior (page reload).
  * Passes the sanitized input back to the parent component via the `onSearch` prop.

***

#### **5. Rendering the Navbar**

```jsx
<nav className="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
  <div className="container">
    {/* App Header Title */}
    <a className="navbar-brand" href="#">
      Google Bookshelf
    </a>

    {/* Search Form */}
    <form className="d-flex ms-auto" onSubmit={handleSubmit}>
      <input
        type="text"jsx
        className="form-control me-2"
        placeholder="Search books..."
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)} // Updates local state
      />
      <button className="btn btn-outline-light" type="submit">
        Search
      </button>
    </form>
  </div>
</nav>
```

* **Header Title**:
  * Displays the app name (`Google Bookshelf`) in the navbar.
  * Styled using Bootstrap's dark theme (`navbar-dark bg-dark`).
* **Search Form**:
  * **Input Field**:
    * Pre-filled with the `query` state.
    * Updates the local `searchInput` state on user input.
  * **Search Button**:
    * Submits the form and calls the `handleSubmit` function.
* **Bootstrap Classes**:
  * **`navbar`**: Styles the container as a navbar.
  * **`d-flex ms-auto`**: Aligns the search form to the right.
  * **`form-control`**: Styles the input field.
  * **`btn btn-outline-light`**: Creates a light-outlined button for the search.

***

#### **6. Prop Validation**

```jsx
NavBar.propTypes = {
  query: PropTypes.string.isRequired,
  onSearch: PropTypes.func.isRequired,
};
```

* **Purpose**:
  * Ensures `query` is a required string.
  * Ensures `onSearch` is a required function to handle search queries.

***

#### **7. Exporting the Component**

```jsx
export default NavBar;
```

* **Purpose**:
  * Makes the `NavBar` component reusable in the parent application.

***

#### Key Takeaways for Students:

1. **State Management**:
   * Learn how to handle local state (`searchInput`) for form inputs.
   * Pass values between child and parent components using props.
2. **Form Handling**:
   * Understand how to prevent the default form behavior (`e.preventDefault`).
   * Trigger actions using parent-defined callback functions (`onSearch`).
3. **Bootstrap Integration**:
   * Utilize Bootstrap classes to style the navbar and search bar for a polished UI.
4. **Prop Validation**:
   * Use `PropTypes` to validate props for better code reliability.

***

This component is now ready to integrate into `AppBookShelf.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/restful-apis-build-a-booksearch-app-ver-2.0/lesson-3-create-navbar.jsx-component.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.