React Ref Keyword

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

);};

//end of card



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

);};
//end of card list
class Form extends React.Component {
  
  handleClick = (event) => {
	event.preventDefault();
  console.log('Event Form SUbmit' + this.userNameInput.value);
};
  
  render(){
  
  return (
  <div>
    <form onSubmit={this.handleClick}>
    <input ref={(input) => this.userNameInput = }
    type="text" placeholder="Git Username" />
    <input type="submit" />
  
    </form>
    </div>
  );

  }
}


//end of form

class App extends React.Component {

state = {cards:[
{

  "avatar_url": "https://avatars2.githubusercontent.com/u/3967042?v=3",
  "name": "Cesar",
  "company": "@rapidlegal",
  "blog": null, 
},
{  
  "avatar_url": "https://avatars2.githubusercontent.com/u/62734?v=3", 
  "name": "dsd",
  "company": "dsd", 
 }
]};
//end of list
			render(){
      	return (
        <div>
        <Form  />
        <CardList cards={this.state.cards} />
        </div>
        );
      }
};


//end of app

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