l1-react

gistfile1.txt

var 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.5em',fontWeight:'bold'}}> {props.name} </div>
          <div> {props.company} </div>
        </div>
      </div>
    );
}

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

class Form extends React.Component {
	state = { userName: ''};
  
  handleSubmit= (event) => {
  	event.preventDefault();
    console.log(this.state.userName);
        				
                		axios.get(`https://api.github.com/users/${this.state.userName}`).then((resp) => {
          console.log(resp);
        });
  };
  
  render() {
  	return (
    	<div>
        <form onSubmit={this.handleSubmit}>
          <input type='text' placeholder='Github username' value={this.state.userName} 
          onChange = {(event) => this.setState({userName: event.target.value})} required />
          <button> Add Card </button>
        </form>
      </div>
    );
  }
}

class App extends React.Component {
	state = {
    cards: [
    {
      name:"Paul O’Shannessy",
      avatar_url:'https://avatars2.githubusercontent.com/u/8445?v=3',
      company: 'facebook'
    },
    {
      name:"Paul O’Shannessy",
      avatar_url:'https://avatars2.githubusercontent.com/u/8445?v=3',
      company: 'facebook'
    }
  	]
  };
	
  render() {	
    return (
    	<div>
        <Form/>
        <CardList cards={this.state.cards}/>
      </div>
    );
  }
}

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