# 7.6 - Github API Search

Inside of your Github app directory, add a file called `GithubCardAppWithSearch`.

Here is a component that allows you to search Github and append a new card to a list. Everything in here will start to look familiar to you. We are using the `.concat()` method. Take a minute to look that up [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat).

When you add the component, it should fire off and look like this:

![Github Api](/files/-LAU8vjebMwSUspfyRD3)

Go through the code line by line and think about what you don't understand. Ask questions. Review what you need to review. Add console.log messages to yourself to get feedback and information. Spend some time pulling this apart.

## GithubCardAppWithSearch

Here is the final code for this component.

```javascript
import React from 'react';
import { Component } from 'react';
import GithubCardList from './GithubCardList';
import GithubCardForm from './GithubCardForm';


class GithubCardAppWithSearch extends Component {
    state = {
        cards: []
    };

    addNewCard = (cardInfo) => {
        this.setState(prevState => ({
            cards: prevState.cards.concat(cardInfo)
        }));
    };

    render() {
        return (
            <div className="main">
                <div className="mainDiv">
                    <GithubCardForm onSubmit={this.addNewCard} />
                    <GithubCardList cards={this.state.cards} />
                </div>
            </div>
        );
    }
}

export default GithubCardAppWithSearch;
```


---

# 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://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/part-8-apps/7.0-github-api-application/7.6-github-api-search.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.