7.3 - Github API Card

The purpose of this next component is to structure the data that we get from any data resource, whether that be an API or from a file.

Let's create a new component called GithubCard

import React from 'react';

const GithubCard = (props) => {
    return (
        <div className="main">
            <div className="mainDiv">
                <img width="75" src={props.avatar_url} alt="card"/>
                <div style={{ display: 'inline-block', marginLeft: 10 }}>
                    <div style={{ fontSize: '1.25em', fontWeight: 'bold' }}>
                        {props.name}
                    </div>
                    <div>{props.company}</div>
                </div>
            </div>
        </div>
    );
};

export default GithubCard;

You will notice that we are expecting 3 different props:

• props.avatar_url

• props.name

• props.company

What do you think will happen if a value is not provided or not found? (food for thought).