> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/part-8-apps/7.0-github-api-application/7.6-github-api-search.md).

# 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;
```