function CardArea({ value }) {
    // Contains the area box for the individual card displays, which are populated
    // based on the text string passed through the parent from the child EntryArea
    // component

    // States
    const [data, setData] = useState([]);
    const [isLoading, setIsLoading] = useState(true);

    let dataIsEmpty = data.length === 0;

    // HTTP call hook
    useEffect(() => {
        fetch(`https://api.collegefootballdata.com/teams?conference=${value}`, {
            method: "GET",
            headers: new Headers({
                Accept: "application/json",
            }),
        })
            .then((response) => response.json()) // Convert to JSON
            .then((response) => {
                // Sanitize object
                return response.map((obj) => {
                    return {
                        id: obj.id,
                        name: obj.school,
                        mascot: obj.mascot,
                        abbr: obj.abbreviation,
                        color: obj.color,
                        logo: obj.logos[0],
                    };
                });
            })
            .then((response) => {
                setData(response); // Save our data in the state
                setIsLoading(false);
            })
            .catch((error) => console.log(error)); // Error handling
    });

    // Render
    return (
        <div>
            {/* Empty state */}
            {dataIsEmpty && (
                <Empty description={<span>No colleges found.</span>}></Empty>
            )}

            {/* Populated state */}
            {!dataIsEmpty && (
                <div>
                    <CardColumns>
                        {data.map((obj) => (
                            <Card style={{ width: 150 }}>
                                <Card.Img src={obj.logo} variant="top" />
                                <Card.Body>
                                    <Card.Title>{obj.name}</Card.Title>
                                    <Card.Text>{obj.mascot}</Card.Text>
                                    <Button
                                        href={`https://espn.com/college-football/team/schedule/_/id/${obj.id}`}
                                        shape="round"
                                        type="default">
                                        Schedule
                                    </Button>
                                </Card.Body>
                            </Card>
                        ))}
                    </CardColumns>
                </div>
            )}
        </div>
    );
}
// Card area container - bottom-most section of application
Card area container - bottom-most section of application
Card area container - bottom - most section of application
function CardArea({ value }) {
    const [data, setData] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    let dataIsEmpty = data.length === 0;
    useEffect(() => {
        fetch(`https://api.collegefootballdata.com/teams?conference=${value}`, {
            method: "GET",
            headers: new Headers({
                Accept: "application/json",
            }),
        })
            .then((response) => response.json()) 
            .then((response) => {
                return response.map((obj) => {
                    return {
                        id: obj.id,
                        name: obj.school,
                        mascot: obj.mascot,
                        abbr: obj.abbreviation,
                        color: obj.color,
                        logo: obj.logos[0],
                    };
                });
            })
            .then((response) => {
                setData(response); 
                setIsLoading(false);
            })
            .catch((error) => console.log(error)); 
    });
    return (
        <div>
            {}
            {dataIsEmpty && (
                <Empty description={<span>No colleges found.</span>}></Empty>
            )}
            {}
            {!dataIsEmpty && (
                <div>
                    <CardColumns>
                        {data.map((obj) => (
                            <Card style={{ width: 150 }}>
                                <Card.Img src={obj.logo} variant="top" />
                                <Card.Body>
                                    <Card.Title>{obj.name}</Card.Title>
                                    <Card.Text>{obj.mascot}</Card.Text>
                                    <Button
                                        href={`https://espn.com/college-football/team/schedule/_/id/${obj.id}`}
                                        shape="round"
                                        type="default">
                                        Schedule
                                    </Button>
                                </Card.Body>
                            </Card>
                        ))}
                    </CardColumns>
                </div>
            )}
        </div>
    );
}
function CardArea ( { value } ) { const [ data , setData ] = useState ( [ ] ) ; const [ isLoading , setIsLoading ] = useState ( true ) ; let dataIsEmpty = data . length === 0 ; useEffect ( ( ) => { fetch ( ` ${ value } ` , { method : "GET" , headers : new Headers ( { Accept : "application/json" , } ) , } ) . then ( ( response ) => response . json ( ) ) . then ( ( response ) => { return response . map ( ( obj ) => { return { id : obj . id , name : obj . school , mascot : obj . mascot , abbr : obj . abbreviation , color : obj . color , logo : obj . logos [ 0 ] , } ; } ) ; } ) . then ( ( response ) => { setData ( response ) ; setIsLoading ( false ) ; } ) . catch ( ( error ) => console . log ( error ) ) ; } ) ; return ( < div > { } { dataIsEmpty && ( < Empty description = { < span > No colleges found. < / span > } > < / Empty > ) } { } { ! dataIsEmpty && ( < div > < CardColumns > { data . map ( ( obj ) => ( < Card style = { { width : 150 } } > < Card . Img src = { obj . logo } variant = "top" / > < Card . Body > < Card . Title > { obj . name } < / Card . Title > < Card . Text > { obj . mascot } < / Card . Text > < Button href = { ` ${ obj . id } ` } shape = "round" type = "default" > 
                                        Schedule
                                     < / Button > < / Card . Body > < / Card > ) ) } < / CardColumns > < / div > ) } < / div > ) ; }
Card area container - bottom-most section of application
Card area container - bottom - most section of application
// Contains the area box for the individual card displays, which are populated // based on the text string passed through the parent from the child EntryArea // component // States // HTTP call hook // Convert to JSON // Sanitize object // Save our data in the state // Error handling // Render /* Empty state */ /* Populated state */