react working with data

dope react spread

// this should be presentation
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: '1.25em'}}>{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: "Jack Howard",
  avatar_url: "https://avatars0.githubusercontent.com/u/5950956?v=4",
  company: "Realnets"
}
]
const CardList = (props) => {
	return (
  	<div>
      {props.cards.map(card => <Card {...card} />)}
    </div>
  )
}

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



// const CardList = ....

// start in the top 
// start in the bottom of the tree

// if no interactivity with the component 
// and if not a top-level 

// then do a function component 

// only use class-based when you need to manage state 


// can