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.

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

Github Api

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.

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;