Working with Data - Build a Github Card Component

const Card = (props) => {
	return (
  	<div style={{margin: '1em'}}>
    	<img width="75" src="https://avatars1.githubusercontent.com/u/8445?v=4" />
    	<div style={{display: 'inline-block', marginLeft: 10}}>
      	<div style={{fontSize: '1.25em', fontWeight: 'bold'}}>
        	Paul O’Shannessy
        </div>
        <div>Facebook</div>
      </div>
    </div>
  );
};

const CardList = (props) => {
	return (
  	<div>
    	<Card />
    </div>
	)
}

ReactDOM.render(<CardList />, mountNode);

------------------------------------------------------------------------------------------------------------------------------

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

const CardList = (props) => {
	return (
  	<div>
    	<Card name="Paul O’Shannessy"
      	avatar_url="https://avatars1.githubusercontent.com/u/8445?v=4"
      	company="Facebook"
      />
    	<Card />
    </div>
	)
}

ReactDOM.render(<CardList />, mountNode);

------------------------------------------------------------------------------------------------------------------------------

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

let data = [
	{ name: "Paul O’Shannessy",
    avatar_urlCheck: "https://avatars1.githubusercontent.com/u/8445?v=4",
    company: "Facebook" },
  { name: "PJ Hyett",
    avatar_urlCheck: "https://avatars0.githubusercontent.com/u/3?v=4",
    company: "GitHub, Inc." },
];

const CardList = (props) => {
	return (
  	<div>
    	{props.cards.map(card => <Card name={card.name} company={card.company} avatar_url={card.avatar_urlCheck}/>)}
    </div>
	)
}

ReactDOM.render(<CardList cards={data}/>, mountNode);

------------------------------------------------------------------------------------------------------------------------------

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

let data = [
	{ name: "Paul O’Shannessy",
    avatar_url: "https://avatars1.githubusercontent.com/u/8445?v=4",
    company: "Facebook" },
  { name: "PJ Hyett",
    avatar_url: "https://avatars0.githubusercontent.com/u/3?v=4",
    company: "GitHub, Inc." },
];

const CardList = (props) => {
	return (
  	<div>
    	{props.cards.map(card => <Card {...card}/>)}
    </div>
	)
}

ReactDOM.render(<CardList cards={data}/>, mountNode);