React II - Passing Parameters

Passing Parameters

const testData = [
{name: "Dan Abramov", avatar_url: "https://avatars0.githubusercontent.com/u/810438?v=4", company: "@facebook"},
      {name: "Sophie Alpert", avatar_url: "https://avatars2.githubusercontent.com/u/6820?v=4", company: "Humu"},
  {name: "Sebastian Markbåge", avatar_url: "https://avatars2.githubusercontent.com/u/63648?v=4", company: "Facebook"},
];


const CardList = (props) => (
  
  <div>
    //Iterate over array
    {testData.map( profile => <Card {...profile} /> )}

    <Card {...testData[0]}/>
  </div>
  
  
)

class Card extends React.Component {
render() {
    
    const profile = this.props;
    
  return (
    <div className="github-profile">
      <img src={profile.avatar_url} />
        <div className="info">
          <div className="name"> {profile.name} </div>
          <div className="company"> {profile.company}  </div>
        </div>
    </div>
    );
  }
}

Passing using parameter names

const CardList = (props) => (
  <div>
    {props.profile.map( profile => <Card {...profile} /> )} 
  </div>
  
)
const CardList2 = () => (
 <div>{this.props}</div> 
)

class App extends React.Component {
render() {
  return (
    <div>
      <div className="header">{this.props.title}</div>
        <Form />
        <CardList profile={testData}/>
        <CardList2 {...testData}/>
    </div>
    );
  }
}